Добавление наложения к изображению с зависанием

Question

У меня есть страница, настроенная как три изображения в столбцах с наложением наложения на них. Я пытаюсь добавить к ним дополнительный оверлей, в основном прозрачный png, над основным изображением, но до наложения наложения.

Вот мой код, и у меня возникли проблемы с этим.

скрипку: http://jsfiddle.net/r4mp0v4v/

.wrapper img{ 
float:left; 
width:100%; 
} 

@media screen and (min-width: 700px) { 
.wrapper img{ 
    width:33%; 
    height:100%; 
} 
} 
body { 
    display: block; 
    margin: 0px; 
} 

img:hover{ 
opacity: 1; 

} 

img { 
opacity: 0.5; 
background: #000; 
} 

overlay_image{ 
position: absolute; 
top: 60px; 
left: 80px; 
} 

<div class="wrapper"> 
<a href="Northside.html"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg" alt=""> 
<img src="http://creativitywindow.com/wp-content/uploads/2013/02/PNG-Portable-Network-Graphics.png" class="overlay_image"> 
</a> 
</div> 
<div class="wrapper"> 
<a href="Catering.html"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Foods_(cropped).jpg" alt=""> 
</a> 
</div> 
<div class="wrapper"> 
<a href="test/index.html"> 
<img src="http://www.healthsguardian.com/wp-content/uploads/2015/05/Improper-time-to-have-some-foods.jpg" alt=""> 
</a> 
</div> 

Answer 1

Как это: http://jsfiddle.net/r4mp0v4v/1/

я удалил некоторые вещи просто так что я мог видеть, что ваш код лучше.

.wrapper { position: relative; } 
.wrapper img{ 
    width:33%; 
} 
body { 
    display: block; 
    margin: 0px; 
} 
img.overlay_image:hover{ 
    opacity: 0; 
} 
img.overlay_image { 
    opacity: 0.5; 
    background: #000; 
} 

.overlay_image{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 5; 
} 
.main_image{ 
    position: relative; 
    z-index: 0; 
}