Glossy Image with CSS

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?

Images don't accept pseudo-elements so you would need to wrap each image in a div/figure and apply the pseudo-element to that. — Paulie_D, Nov 25 '14 at 16:38
Make the `
` into `` and then change the CSS to `a { }` / `a img { }` / `a:after { }` — misterManSam, Nov 25 '14 at 16:39
I would assume replacing `figure` with `a` in your css would achieve the same effect for every `img` inside an `a`nchor — CaldwellYSR, Nov 25 '14 at 16:39
possible duplicate of [Does :before not work on img elements?](http://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements) — Jamie Barker, Nov 25 '14 at 16:40

score 0 · Answer 1 · answered Nov 25 '14 at 17:09

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>

It works perfect on the images, but the code you gave me make the links glossy too , and I don't want that, I want it to be applied to the gallery images only. [Here you have the link to the gallery](http://danithemes.fanscity.eu/designs/) — PLL On Abc, Nov 29 '14 at 16:01

Glossy Image with CSS

1 Answers1

Example