CSS transform scale breaks image overlay - css

Question

HTML Markup:
<div class="item">
<a href="url">
<img src="photo.jpg" />
</a>
</div>
This CSS zooms the image on hover:
.item a img {
transition: all 0.2s linear;
}
.item a:hover img {
transform: scale(1.05);
}
This CSS adds an overlay on hover:
.item a {
position: relative;
}
.item a:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: none no-repeat center center;
transition: all .3s linear;
}
.item a:hover:before {
background:rgba(0,0,0, 0.5) url('img/zoom.png') no-repeat center center;
}
Each one works fine by itself. However, when I try to use both bits of CSS, only the zoom works; the overlay is broken.
Simply, how can I write the CSS to combine these two effects?

Answer 1

You could try adding z-index:1 to the the absolute positioned element.
.item a img {
transition: all 0.2s linear;
}
.item a:hover img {
transform: scale(1.05);
vertical-align: top;
}
.item a {
position: relative;
display: inline-block;
}
.item a:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: none no-repeat center center;
transition: all .3s linear;
z-index: 1;
}
.item a:hover:before {
background: rgba(0, 0, 0, 0.5) url('//dummyimage.com/50') no-repeat center center;
}
<div class="item">
<a href="url">
<img src="//dummyimage.com/200" />
</a>
</div>