Fading back in the page from before

HTML & CSS
41

Yes I assumed that you were going to swap the background each time on body.bg1:before but instead you only added a background to that element for the first item. On play2 you changed the element that had the background to .play2:before and so on… It would have made sense just to add them to the body:before as required or add them all to ,.playx:before (as you have now done). Also you were still adding that first background behind the other various background which is why it kept reverting to fading out the first background.

Now that you have added play1 for the first background you can reduce this rule:

body.bg1 .play1::before,
body.bg1 .play2::before,
body.bg1 .play3::before,
body.bg1 .play4::before,
body.bg1 .play5::before,
body.bg1 .play6::before,
body.bg1 .play7::before,
body.bg1 .play8::before,
body.bg1 .play9::before {
  content: "";
  position: fixed;
etc..

And just use this,

body.bg1 .with-curtain:before{
  content: "";
  position: fixed;
 etc...

Wherever you see yourself adding multiple comma separated classes for the same set of rules there is always a better way.:slight_smile:

1 Like