3

i want to show a hidden div when a photo is hovered, the problem is that the hidden divs got a background color, and when i hover some photo, the background still hidden.

I tried to put z-index 0 on the principal div, and z-index 1000 on the hidden div, but still not working.

How can i change that, and what am i doing wrong?

http://jsfiddle.net/r7zhn50L/

Thanks.

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;
}
José António
  • 101
  • 2
  • 8

1 Answers1

3

The z-index property only applies to positioned elements.

You could add position: relative to the element. (updated example)

.photos .a-hover {
    z-index: 2;
    position: relative;
}

Also, you need to remove the gap resulting from the inline img element's baseline alignment. This answer is relevant.

The approach you are currently using only works for elements with fixed dimensions. I'd suggest using an approach that will work with dynamically varying dimensions: (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 actually be helpful too.

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • 1
    I was too slow to answer :) [have this fiddle with a transition using `opacity`](http://jsfiddle.net/s0rveumo/) - the `display: block` on the image removes that baseline gap. – misterManSam Nov 27 '14 at 01:49
  • [and here is another example](http://jsfiddle.net/a3jtvn6x/) that positions the overlay with `position: absolute`. No need for negative margins. – misterManSam Nov 27 '14 at 01:55