How to overlay a transparent image in html?

I have the Html, there are various photos when the point in the photo is glare and these photos are links, but I need to impose on them patterns png, when I do it by using position:fixed, my cursor no longer sees the photo and the result is not a link,don't highlight is not happening
September 19th 19 at 13:23
2 answers
September 19th 19 at 13:25
Solution
Place the image and the layer with the patterns in the container. Let both will have position:absolute and the same coordinates, only the pattern layer with a greater z-index and a default value display:none.
On hover the container, add glare to the image, and display layer with patterns
September 19th 19 at 13:27
Position the layer with the pattern under the photo, when you reduce the opacity of the photo.
In General construction this
<div class="container><a href=" site.ru"><img src="photo.jpg"></div>

.container {background: url(uzor.png);}
.container img:hover {opacity: 0.5;}

Find more questions by tags HTMLCSS