Cover a div with a transparent overlay

Question

I have a page with a two column layout, where both columns scroll individually, and have dynamic size. I would like to cover one of the columns in a transparent light grey div, so that it looks inactive.

The layout is done using CSS grid layout.

<div class="container">
  <div class="column">
    Left content
  </div>
  <div class="column">
    Right content
  </div>
</div>

Css:

.container {
  display: grid;
  grid-template-columns: calc(50%) calc(50%);
  grid-template-rows: 100%;
  height: 100px;
}

.column {
  overflow-y: scroll;
}

Here is a JSFiddle, but it will only work in Chrome, and you must enable "Experimental Web Platform features" in chrome://flags: https://jsfiddle.net/152on3bc/ (It will also work in Electron if you feel like setting that up)

The desired effect would look like this (same caveats re: chrome://flags): https://jsfiddle.net/hawsfL9t/1/ but that one doesn't work once you scroll the left div.

Since this is for an electron app, any solution that only works in Chrome or Electron is fine. Using plain JavaScript is also fine, no need to be CSS only.

Answer 1

You can add a class to the div which you want to show inactive.

<div class="column inactive">

and in the CSS use:

.inactive {
    opacity: 0.5;
}

If you want to use colors, you can use:

"Transparency using RGBA".

*Updated the post.

Hope it helps. :)

 .container { display: grid; grid-template-columns: calc(50%) calc(50%); grid-template-rows: 100%; height: 100px; } .column { overflow-y: scroll; } .left { float: left; width: 50%; } .right { float: right; width: 50%; } .inactive { background: rgba(76, 175, 80, 0.5); opacity: 0.5; } 

 <div class="container"> <div class="column left"> <p>Left content<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros.</p> </div> <div class="column right inactive"> <p>Right content<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec massa enim. Aliquam viverra at est ullamcorper sollicitudin. Proin a leo sit amet nunc malesuada imperdiet pharetra ut eros.</p> </div> </div> 

Answer 2

You can create overlay class where you want to show disabled or inactive as

<div class="overlay">

and style as

.overlay{
    opacity: 0.5;
    pointer-events: none;
}

Regards.

Answer 3

There is one very usefull jquery plugin available for wrapping div with transparent div it is jQuery BlockUI Plugin

by using this plugin you can apply block ui in any element as mentioned below

Blocking UI

  $('div.test').block({ 
                    message: '<h1>Processing</h1>', 
                    css: { border: '3px solid #a00' } 
                }); 

Unblocking UI

$('div.test').unblock(); 

Answer 4

or you can add a class inactive.

<div class="column inactive">

In css: .inactive { background:rgba(255,255,255,0.5); } .inactive { background:rgba(255,255,255,0.5); }

and remove all the text section background colors.

Answer 5

You can use the absolute positioned idea you were working with, and use JavaScript to set the height of the overlay to the height of the scrolled content.

 var h = document.getElementById('column2').scrollHeight; var block = document.getElementById('block'); block.style.height = h + 'px'; 

 .container { display: grid; grid-template-columns: calc(50%) calc(50%); grid-template-rows: 100%; height: 100px; } .column { overflow-y: scroll; position: relative; } .block { position: absolute; background: pink; opacity: 0.5; width:100%; } 

 <div class="container"> <div class="column"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit urna a purus consequat tristique. Nam sed quam rhoncus, bibendum lacus vel, bibendum ligula. Maecenas semper, libero sit amet pretium ultrices, lorem dui laoreet felis, sed elementum libero orci eget risus. Sed sed mi enim. Ut sit amet est non metus ultrices tristique vel at velit. Praesent ultrices, libero rhoncus congue porta, metus elit pellentesque lectus, id blandit erat sem id nunc. Sed pretium auctor sapien, et molestie dolor aliquet et. Etiam pulvinar tristique nisi, et condimentum neque maximus ut. Integer quis ex lorem. Suspendisse nec arcu ut elit dictum consequat ac ut nibh. Praesent pretium consequat nulla id dictum. Vivamus lobortis ullamcorper nibh, a fringilla ligula interdum vitae. Cras dignissim, mi a hendrerit posuere, mi arcu lacinia dui, placerat ullamcorper dui arcu in ante. </div> <div class="column" id="column2"> <div id="block" class="block"> </div> Suspendisse consequat commodo egestas. In consequat augue vel diam fermentum vehicula. Mauris faucibus arcu quam, vitae finibus nulla facilisis non. In ultricies est a justo consectetur, nec volutpat justo varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit gravida varius. Quisque at tempus nulla, ut mattis eros. </div> </div>