My objective is to create an image that is wrapped in a link. The link will have a pseudo element :before that adds a black overlay on hover. I want the image to remain clickable, but no matter what I try, the pseudo element won't position correctly over the image.
<a href="http://google.com">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
</a>
a {
position: relative;
}
a:before {
position: absolute;
z-index: 99999999;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
background-color: black;
}
img {
display: block;
}