How to make a CSS Shimmer Effect on Image?

Question

I have the following shimmer effect working very well when used on a p element but it doesn't work on any div nor an img. So, what modifications should I make to make sure the shimmer effect plays on any element.

The snippet is below

 .shimmer {
      display: inline-block;
      color:grey;
      background: #acacac -webkit-gradient(linear, 100% 0, 0 0, from(#acacac), color-stop(0.5, #ffffff), to(#acacac));
      background-position: -50rem top; /*50px*/
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-animation-name: shimmer;
      -webkit-animation-duration: 2.2s;
      -webkit-animation-iteration-count: infinite;
      -webkit-background-size: 50rem 100%; /*50px*/
      font-size: 90px;
    }
    
    @-webkit-keyframes shimmer {
        0% {
            background-position: -50rem top; /*50px*/
        }
        70% {
            background-position: 12.5rem top; /*200px*/
        }
        100% {
            background-position: 12.5rem top; /*200px*/
        }
    }

<div>
<p class="shimmer">Shimmering Text</p>

<div>
<img src="https://i.sstatic.net/MeQxk.png" width=100 height=100 alt="Image Should Shimmer.Unfortunately not working "/>
</div>
</div>

Headman

Howdy, would you mind adding a reproducible example to help visualize? You can use the snippet editor (the button with the <> icon on it on the question editor) from what I see at first glance it should work fine on most elements but not img however there's workarounds for all that. – Angloindian

Hi, but I want it to work specifically for img. Even if it won't work on div it is fine, but I really want it to work for img – Headman

Ah ok I see what you mean now. So your text works as expected since you have the option to specify background-clip: text but with your image unfortunately it's not so clean and you're restricted to the box model of its parent container (eg; border-box, content-box, etc) but if your background will consistently stay white like the example I can show you how to mimic the same effect, is that all you're looking for? Or are you needing it to clip to the image contents shape? That's trickier. – Angloindian

Yes, I want the background to stay consistently white while the shimmer runs over the image repeatedly. I don't want it to clip to the image contents shape. That's all I need. Thank you – Headman

Answer 1

Use mask

.shimmer {
  color: grey;
  display: inline-block;
  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/350% 100%;
  animation: shimmer 2.5s infinite;
  font-size: 50px;
  max-width: 200px;
}

@keyframes shimmer {
  100% {
    mask-position: left
  }
}

<p class="shimmer">Shimmering Text</p>
<img src="https://i.sstatic.net/MeQxk.png" class="shimmer" />

Chrissy

There is a stutter in the end of the loop where the position of the mask at the start and end of the animation do not line up. How would you fix this without reversing the direction of the animation? – Kairouan

I notice it, too. – Geffner