Overlay image on hover
I want to show the hidden div when the photo is hovered, the problem is that the hidden divs got a background color and when I hover the photo the background is still hidden.
I tried to put z-index 0 on the main div and z-index 1000 on the hidden div, but still doesn't work.
How can I change this and what am I doing wrong?
Thank.
HTML:
<div class="photos">
<div class="a-img">
<img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg" width="180" height="250" />
<div class="a-hover">sdfsdf</div>
</div>
<div class="a-img">
<img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg" width="180" height="250" />
<div class="a-hover">sdfsdf</div>
</div>
<div class="a-img">
<img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg" width="180" height="250" />
<div class="a-hover">sdfsdf</div>
</div>
</div>
CSS
.photos .a-img{
float:left;
margin-left:10px;
z-index:0;
}
.photos .a-hover{
width:180px;
height:250px;
background-color:red;
margin-top:-250px;
display:none;
z-index:1000;
}
.photos .a-img:hover .a-hover{
display:block;
}
source to share
The property z-index
applies only to positioned items.
You can add position: relative
to item. (updated example)
.photos .a-hover {
z-index: 2;
position: relative;
}
Also, you need to remove the gap resulting from the alignment of the baseline img
. This answer matters.
The approach you are using only works for elements with fixed dimensions. I would suggest using an approach that will work with dynamically resizing: (example)
.photos .a-img {
float: left;
margin-left: 10px;
position: relative;
}
.photos .a-hover {
background-color: #f00;
display: none;
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
.photos .a-img:hover .a-hover {
display: block;
}
This answer might be helpful as well.
source to share