Наложение изображения на зависание

Question

Я хочу показать скрытый div, когда фотография зависла, проблема в том, что скрытые divs получили цвет фона, и когда я навешиваю фотографию, фон все еще скрыт.

Я попытался поместить z-индекс 0 на главный div и z-index 1000 на скрытый div, но все равно не работает.

Как я могу изменить это, и что я делаю неправильно?

http://jsfiddle.net/r7zhn50L/

Спасибо.

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; 
} 

Answer 1

z-index свойство only applies to positioned elements.

Вы можете добавить position: relative к элементу. (updated example)

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

Кроме того, вы должны удалить разрыв в результате базового выравнивания в инлайн img элемента. This answer.

---

Подход, который вы используете в настоящее время, работает только для элементов с фиксированными размерами. Я предложил бы использовать подход, который будет работать с динамически изменяющихся размеров: (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 может быть на самом деле полезно тоже.