CODEWITHSUNDEEP
htmlcss
lawrencehagman
lawrencehagman

Reputation: 493

How to grey out parent div and sibling divs with javascript/css

I have a parent div that displays a scrollable list of div elements. For first time users I want to grey out all the elements in the list and the parent div and leave only the first element displayed normally.

I've tried using box shadow but it only affects the background not the sibling or parents.

I've also looked a overlaying a grey opaque div but that would cover up the div I'm trying to highlight.

I've included a paintover screen grab of the html. It's too complicated to include it. Sorry :/.

Does anyone have a javascript/css recommended way?enter image description here

Upvotes: 1

Views: 814

Answers (1)

Richard Hunter
Richard Hunter

Reputation: 2180

If I understand the problem correctly, you want a transparent overlay over your page, but with a 'hole' in it for one element to show through?

Here is a first pass at the problem. It uses a pseudo-element over the target element that is just 10 pixels wider on either side with a transparent box-shadow on it that extends across the entire viewport. (100vw should be enough, but could be made bigger if necessary). A second inset box-shadow provides the soft edge.

toggleOverlay.addEventListener('click', () => {
  foo.classList.toggle('with-overlay');
});
body {
  background: antiquewhite;
}

.foo {
  padding: 40px;
  margin: 100px;
  position: relative;
  border: solid 1px black;
}

.foo.with-overlay:before {
  content: '';
  pointer-events: none;
  position: absolute;
  border-radius: 10px;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  box-shadow: 0 0 0 100vw rgba(1, 1, 1, 0.5), inset 0 0 2px 2px rgba(1, 1, 1, 0.5);
  background: transparent;
  opacity: 0.8;
}
<div>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="foo" class="foo">
  hello world
  <button id="toggleOverlay">toggle overlay</div>
</div>
<div>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Upvotes: 1

Related Questions