CODEWITHSUNDEEP
css
JBird
JBird

Reputation: 39

How to add shimmer effect in CSS

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.

Upvotes: 4

Views: 6492

Answers (2)

Native Coder
Native Coder

Reputation: 1870

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.

Upvotes: 0

d41d8cd98f00b204e9800998ecf842
d41d8cd98f00b204e9800998ecf842

Reputation: 765

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>

Upvotes: 4

Related Questions