Add overlay div into another scrollable div

I create scrollable div with some dots into this div:

.testimonial-group>.row {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.testimonial-group>.row>.col {
  display: inline-block;
  max-width: 20vh;
}

.dot {
  margin-top: 2vh;
  margin-bottom: 3vh;
  height: 10vh;
  width: 10vh;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="options-element" data-options-element="colours" style="background-color:#F3F5F6; height: 100%;">
  <div class="testimonial-group" style="margin-left: 13%; max-width: 83%;">
    <div class="row">
      <div class="col"><span class="dot" style="background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 46%, rgba(255,255,255,0.3) 100%);"></span></div>
      <div class="col"><span class="dot" style="background: linear-gradient(135deg, rgba(4,4,4,1) 0%, rgba(4,4,4,1) 46%, rgba(4,4,4,0.3) 100%);"></span></div>
      <div class="col"><span class="dot" style="background: linear-gradient(135deg, rgba(48,48,48,1) 0%, rgba(48,48,48,1) 46%, rgba(48,48,48,0.3) 100%);"></span></div>
      <div class="col"><span class="dot" style="background: linear-gradient(135deg, rgba(137,29,21,1) 0%, rgba(137,29,21,1) 46%, rgba(137,29,21,0.3) 100%);"></span></div>
      <div class="col"><span class="dot" style="background: linear-gradient(135deg, rgba(123,124,126,1) 0%, rgba(123,124,126,1) 46%, rgba(123,124,126,0.3) 100%);"></span></div>
      <div class="col"><span class="dot" style="background: linear-gradient(135deg, rgba(76,80,83,1) 0%, rgba(76,80,83,1) 46%, rgba(76,80,83,0.3) 100%);"></span></div>
      <div class="col"><span class="dot" style="background: linear-gradient(135deg, rgba(130,169,208,1) 0%, rgba(130,169,208,1) 46%, rgba(130,169,208,0.3) 100%);"></span></div>
      <div class="col"><span class="dot" style="background: linear-gradient(135deg, rgba(175,67,14,1) 0%, rgba(175,67,14,1) 46%, rgba(175,67,14,0.3) 100%);"></span></div>
      <div class="col"><span class="dot" style="background: linear-gradient(135deg, rgba(123,124,126,1) 0%, rgba(123,124,126,1) 46%, rgba(123,124,126,0.3) 100%);"></span></div>
    </div>
  </div>
</div>

I would like to have this effect:

For test overlay I add overlay div:

<div class="row">
   <div id="overlay">
   </div>
...
</div>

CSS Styles:

#overlay {
  position: fixed;
  display: block;
  width: 10vh;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

But div overlay the entire page, not only div with row class

Add overlay div into another scrollable div

0 Answers