0

I got a website. My Body has a background-image which I want to grayscale after pressing a button. I add the class .grayscale to the body which contains a .grayscale:before.

  .grayscale {
  transition: all 3s;
  position: relative;
}

.grayscale:before {
  content: "";
  z-index: -1;
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: cover;
  display: block;
  background: inherit;
  transition: all 3s;

  filter: grayscale(70%) brightness(108%);
}

The result is as planned, BUT without the transition. The background is in grayscale which is perfect, but because I add the class the transition doesn't count. How is the proper way to handle these situations?

Thanks in advance!!!

RoyalRagger
  • 73
  • 1
  • 5
  • 1
    because your are creating a new element and you cannot have transition on display ... the element should be there initially and then simply add the filter – Temani Afif Jul 25 '18 at 11:55
  • But this only works with :before, because otherwise my content gets grayscaled, too. Can I add the :before with javascript? – RoyalRagger Jul 25 '18 at 11:58
  • yes, that's why the before element should be there intially if you want to have transition .. simply add it to the body and apply the filter using grayscale class later – Temani Afif Jul 25 '18 at 11:59
  • What he is saying is that all you need is `body::before` **already in place** with the non-filtered background and then apply the class. That should work. – Paulie_D Jul 25 '18 at 12:02
  • https://codepen.io/Paulie-D/pen/xJryVo – Paulie_D Jul 25 '18 at 12:08
  • Thanks that did it!!! – RoyalRagger Jul 25 '18 at 12:50

0 Answers0