Question

0

411

Vistas

Fading top and bottom edges of a semi transparent and scrollable div with a background video

So I have a div that contains a fixed height and inside it there is another one with overflow: auto that lets the div be scrollable. The parent div is semi-transparent and in the background of everything there is a video being played.

HTML:

<div class="parent">

  <div class="fade-top"/>

  <div class="fade-bottom"/>

  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
  </div>

</div>

CSS:

.parent{
  height: 2rem;
  position: relative
  background: hsla(180, 2%, 8%, 0.76);
}

.fade-top {
  poistion: absolute;
  top: 0;
  background: linear-gradient(0deg, hsla(180, 2%, 8%, 0.76) 20%, transparent 100%);
  height: 50px;
  transition: opacity 0.3s;
}

.fade-bottom {
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, $content-bg-elementum 20%, transparent 100%);
  height: 50px;
  transition: opacity 0.3s;
}

.text {
  overflow: auto;
}

Question:

How do I make the top and bottom divs fade gradually to mix with the parent semi-transparent color?

Current state, the red board has to be mixed with the parent background and not cut by the height of the parent:

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-08T22:08:37.329Z

You can use After and before for fade top and bottom instead of using extra divs. The code will be like.

HTML

 <div class="parent">
 <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
  </div>
</div>

CSS

.parent{

 position: relative;
width: 600px;
  background: hsla(180, 2%, 8%, 0.76);
  color: white;
}
.parent:before{
content: "";
  width:100%;
  height:40px;
  background: linear-gradient(black, transparent);
  position:absolute;
  top: 0;
}
.parent::after{
content: "";
  width:100%;
  height:40px;
  background: linear-gradient(transparent, black);
  position:absolute;
  bottom: 0;
}
.text {
  overflow-y: auto;
  height: 200px;
}

https://codepen.io/suffiyan1/pen/vYeyjZo

Answer 2 · 2022-07-08T22:08:37.337Z

So I finally found a way around this using the CSS property mask. Like this:

HTML:

<div class="parent fade-top-bottom">

  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! 
    Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure 
    laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem 
    ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci, 
    aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
  </div>

</div>

CSS:

.parent{
  height: 2rem;
  position: relative
  background: hsla(180, 2%, 8%, 0.76);
}

.fade-top-bottom {
    mask:
    linear-gradient(to top,  transparent 10%, black 80%, transparent 100%),
    linear-gradient(to bottom, transparent 10%, black 80%, transparent 100%);
  }

.text {
  overflow: auto;
}

0

411

Fading top and bottom edges of a semi transparent and scrollable div with a background video

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT