How to add shimmer effect in CSS

Question

I am designing a website and I am trying to add a shimmer effect to an image inside the CSS code. Below is the code to add the shimmer effect that I am using (source: Make CSS Shimmer Effect Work an already loaded Image)

  .shimmer {
  color: grey;
  display:inline-block;
  -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s infinite;

}

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

And I am trying to add the effect to the image in this line of code.

.bottomhalf{padding:10px;padding-bottom:4px;background-image:url("https://i.sstatic.net/MeQxk.png");background-size:contain;background-repeat:no-repeat;background-position:center center}

I am not sure how to get this done. If someone could tell me how to do it - or even change the code that adds the shimmer - it would be very helpful. Thank you.

Answer 1

This ?

.shimmer {
  color: grey;
  display:inline-block;
  -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s infinite;
}

.bottomhalf{
  padding:10px;
  padding-bottom:4px;
  background-image:url("https://i.sstatic.net/MeQxk.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center
}

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

<div class="shimmer bottomhalf"></div>