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 ?
Just put the image and the panel you want in a wrapper div, put position:relative
on the wrapper so the absolute positioned text is placed relative to the wrapper. position:absolute
and a z-index
on the panel
so that you can position it where you want and have it higher in the z-index order. And finally put a z-index
on the image that has a lesser value then the 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.