2

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.stack.imgur.com/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.

JBird
  • 19
  • 4

2 Answers2

3

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.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"></div>
Kyun
  • 692
  • 3
  • 11
  • That adds the shimmer effect to the image but I have to keep the original line of code and find a way that adds the shimmer to the image while in the line of code. Sorry I am new to coding so I am not sure if that does that or how to add the code to the original line. – JBird Nov 11 '21 at 08:50
  • @JBird I changed it according to the default code, hope it can solve your problem – Kyun Nov 11 '21 at 09:26
  • I tried implementing the code but what happened was that it loaded the image in the correct spot that was not shimmering and also loaded a tiny image in the top left of the screen that was shimmering. Do you have any idea what would cause this? Is there anyway I could reference the "background-image" only and not the entire "bottomhalf"? Thank you – JBird Nov 16 '21 at 00:37
0

The problem: The most common implementation of the "shimmer" effect, and the one that you are using, is to apply a gradient transparency mask that animates from left to right. As long as your background is white, this works.

But what happens when the background is not white?

body {
  background-color: black;
}

table, th, td {
  border:1px solid black;
}/* Just to make the table cells obvious */

td {
  background-color: blue;
  color: white;
}

This shows the limitations of the transparency mask by itself. So the solution is simple, make the thing behind the shimmering node white. like so

body {
  background-color: black;
}

table, th, td {
  border:1px solid black;
}/* Just to make the table cells obvious */



/* Turn the row white */
tr {
  background-color: white;
}




td {
  background-color: blue;
  color: white;
}

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

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

So what about other elements? Well, divs work well for most elements since they have no border, margin, or padding. This means they will never be bigger than their contents, and therefore, will never be seen.

If you are a react user, I've simplified things for you.

Native Coder
  • 1,792
  • 3
  • 16
  • 34