Glossy Image with CSS - html

Question

I want to apply this code:
/* Glossy overlay */
html {
min-height: 100%;
background: linear-gradient(#000, #445);
}
figure {
width: 162px;
height: 162px;
margin: 24px auto;
position: relative;
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
border-radius: 5px;
}
figure img {
display: block;
border-radius: 5px;
}
figure:after {
position: absolute;
pointer-events: none;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 50%);
-webkit-mask-image: linear-gradient(#000, transparent);
mask: url(http://daneden.me/labs/albums/images/mask.svg#mask);
}
<figure>
<img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</figure>
But I don't want to apply it on a div element, I want to apply it on every single photo (through a img How can I do that?

Answer 1

I want to apply it on every single photo (through a img)
If every image is inside an <a>, all you need to do is change the CSS to target a, a img and a:after. Ensure that the <a> is display: block or display: inline-block;
Example
/* Glossy overlay */
html {
min-height: 100%;
background: linear-gradient(#000, #445);
}
a {
display: inline-block;
width: 162px;
height: 162px;
position: relative;
box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
border-radius: 5px;
}
a img {
display: block;
border-radius: 5px;
}
a:after {
position: absolute;
pointer-events: none;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 5px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 50%);
-webkit-mask-image: linear-gradient(#000, transparent);
mask: url(http://daneden.me/labs/albums/images/mask.svg#mask);
}
<a>
<img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>
<a>
<img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>
<a>
<img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>
<a>
<img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>
<a>
<img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>
<a>
<img src="http://lorempixel.com/output/animals-q-c-162-162-10.jpg">
</a>