html - Apply a filter on a div just using Bootstrap

Question

I have two columns in bootstrap. A button in one column opens a menu in the other column and applies a filter over the second column. This is the code.

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
   <div class="col-sm-6 bg-success">
   <button class="btn btn-warning" data-toggle="collapse" data-target="#module" aria-expanded="false" aria-controls="module">
     Bring module
   </button>
   <br>
     Some text
   </div>
  
   <div class="col-sm-6 bg-primary">
    <div id="module" class="collapse">
     Some module
   </div>
     <div class="sd">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
     </div>
   </div>
  </div>
</div>

CSS

#module{
  position: absolute;
  background-color: white;
  z-index: 9999;
}

I want to blur the <div class="sd"> on the expansion of the #module div. WITHOUT USING JS OR JQUERY

I also want it to look like the #module is expanding from the button (not top to down, as is now).

question from:https://stackoverflow.com/questions/65871373/apply-a-filter-on-a-div-just-using-bootstrap

Answer 1

Waitting for answers