Can this be written without the extra div?

I added background to it.

https://jsfiddle.net/16nxomft/

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  background: url("https://img.youtube.com/vi/CHahce95B1g/maxresdefault.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.slide .background {
  animation: fadeOutBack 8s forwards 0s;
}

@keyframes fadeOutBack {
  to {
    opacity: 0;
  }
}
      <div class="background"></div>
      <div class="panel-left"></div> 
      <div class="panel-right"></div>

You could do it with just the one div.

<div class="background"></div>

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  background: 
  url("https://img.youtube.com/vi/CHahce95B1g/maxresdefault.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
}

.slide .background {
  animation: fadeOutBack 8s forwards 0s;
}

@keyframes fadeOutBack {
  to {
    opacity: 0;
  }
}

.background:before,
.background:after {
  content:"";
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  left:0;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-position: 0 0;
  background-size: 10px 10px;
  background-repeat: repeat;
  pointer-events: none;
}

.background:before {
  left: 0;
}

.background:after {
  right: 0;
}

.background:after {
  left: auto;
  right:0;
}

.curtain.slide .background:before {
  transform: translateX(calc(-100% - 1px));
}

.curtain.slide .background:after {
  transform: translateX(calc(100% + 1px));
}

But it does depend on what comes next and the animation on background will affect the pseudo elements also if that’s an issue.

What if I don’t want the fade being applied to the gradient?

Only to the image.

Then you need 1 extra element:)

Which means go back to this?

      <div class="background"></div>
      <div class="panel-left"></div> 
      <div class="panel-right"></div>

That’s 2 extra elements.

I said one.

e.g.

<div class="background"><span></span></div>

.background,.background span {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left:0;
  pointer-events: none;
}
.background span{
   background: 
  url("https://img.youtube.com/vi/CHahce95B1g/maxresdefault.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.slide .background span {
  animation: fadeOutBack 8s forwards 0s;
}

@keyframes fadeOutBack {
  to {
    opacity: 0;
  }
}

.background:before,
.background:after {
  content:"";
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  left:0;
  transition: all 8s ease;
  transition-delay: 0s;
  overflow: hidden;
  pointer-events: none;
  z-index:1;
  background:
    linear-gradient(45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px),
    linear-gradient(-45deg,
      transparent,
      transparent 7px,
      black 7px,
      black 7.5px,
      transparent 7.5px,
      transparent 10px);
  background-position: 0 0;
  background-size: 10px 10px;
  background-repeat: repeat;
  pointer-events: none;
}

.background:before {
  left: 0;
}

.background:after {
  right: 0;
}

.background:after {
  left: auto;
  right:0;
}

.curtain.slide .background:before {
  transform: translateX(calc(-100% - 1px));
}

.curtain.slide .background:after {
  transform: translateX(calc(100% + 1px));
}
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.