a tag :before element to produce hover effect over image and still be clickable?

So what I want to achieve is an image wrapped in a link. This link will have a psuedo element :before that produces a black overlay on hover. This image should remain clickable. However, no matter what I do the pseudo element won't position above the image.

<a href="http://google.com">
  <img src="http://ift.tt/1BE5xku">
</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;
}

http://ift.tt/1Ty0qM9

via Chebli Mohamed