Add an overlay on a clickable image

Hey,

I would like to add an overlay on my clickable image on wordpress. I use the starter theme Underscores.

Here is the code:

<div class="img">
  <a href="https://127.0.0.1/wordpress/2016/07/09/projet-8/">
<img width="1600" height="1200" src="https://127.0.0.1/wordpress/wp-content/uploads/2011/07/dsc09114.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="Sydney Harbor Bridge" srcset="https://127.0.0.1/wordpress/wp-content/uploads/2011/07/dsc09114.jpg 1600w, https://127.0.0.1/wordpress/wp-content/uploads/2011/07/dsc09114-300x225.jpg 300w, https://127.0.0.1/wordpress/wp-content/uploads/2011/07/dsc09114-768x576.jpg 768w, https://127.0.0.1/wordpress/wp-content/uploads/2011/07/dsc09114-1024x768.jpg 1024w" sizes="(max-width: 1600px) 100vw, 1600px">
</a>
</div>

I try many different things, here’s the last one:

.img a{
position: relative;
}

.img a:before{
content: “”;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba (0,0,0,0.6);
transition: background .3s linear;
}

.img a:hover:before{
background: none;
}

But nothing work and I starting to lose my patience hehe.

Could you help me please?

Thanks