Shimmer Effect in CSS-CodePudding

I have a piece of code were I am trying to add a shimmer effect to an image. Here is the code:

.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.stack.imgur.com/MeQxk.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center center
}

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

<div class="shimmer bottomhalf">

However, when I try to use the code, the image either appears very small in the top left or the image appears a bit shrunk but moved to the left side. Is there anyway to fix this or to have the shimmer affect only the "background-image" rather than the whole "bottomhalf"? Thank you!

The initial code came from Make CSS Shimmer Effect Work an already loaded Image and an updated code came from How to add shimmer effect in CSS

CodePudding user response：

.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;
  font-size: 50px;
  max-width:200px;
}

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

<p class="shimmer">Your Text</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"class="shimmer" />

CodePudding user response：

try this way:

.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;
  font-size: 50px;
  max-width:200px;
}

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

<p class="shimmer">Shimmering Word</p>
<img src="https://i.stack.imgur.com/MeQxk.png"class="shimmer" />