0

I am currently redesigning my blog, and would like to have a panel at the bottom of each image going across at the top of the blog. I have searched the internet and couldn't find exactly what I was looking for.

This is what the image at the top currently looks like

http://i1078.photobucket.com/albums/w483/tobster619/Gaming%20Images/FeaturedImage_zpsf93acced.png

At the bottom of the image I have been trying to get a panel, in CSS, that looks as if it's wrapping around behind the image, like a 3d effect popping out, and then to be able to add text to it.

Any Ideas ?

4

1 回答 1

0

只需将图像和您想要的面板放在包装器 div 中，放在position:relative包装器上，以便绝对定位的文本相对于包装器放置。position:absolute和 a z-indexon thepanel以便您可以将其放置在您想要的位置并使其在 z-index 顺序中更高。最后将 az-index放在价值较小的图像上panel z-index

HTML

<div class="textImgHover">
   <img src="someimage.jpg" />
   <div class="panel">
     <div class="panelitem">Panel Item 1</div>
     <div class="panelitem">Panel Item 2</div>
     <div class="panelitem">Panel Item 3</div>
   </div>
</div>

CSS

.textImgHover {
   position:relative;
}

.textImgHover .panel {
   position:absolute;
   bottom:5px;
   left:5px;
   z-index:20;
}

.textImgHover .panelitem {
   float:left; 
   margin-right:5px;
   background:rgba(255,255,255,0.2);
   color:#FFF;
   padding:3px;
}

.textImgHover img {
   position:relative;
   z-index:10;
}
于 2013-08-03T16:01:14.237 回答