1

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

lawrencehagman
  • 471
  • 1
  • 3
  • 16
  • do your divs contain an or – avia Oct 06 '20 at 22:41
  • Does this answer your question? [how to disable DIV element and everything inside](https://stackoverflow.com/questions/15555295/how-to-disable-div-element-and-everything-inside) – avia Oct 06 '20 at 22:43

1 Answers1

1

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>
Richard Hunter
  • 1,933
  • 2
  • 15
  • 22
  • Thanks for the help! This get's me very close. My dom is organized slight different than yours so it doesn't overlay on the parent div. Is there a simple way to achieve that? – lawrencehagman Oct 07 '20 at 00:49
  • What I've done is attach a pseudo element to the element that I want to show through the hole. As long as that 'parent' element exists, you can do that. It looks to me in your design that you have such an element there. It has a border and curved edges on it. You can use that surely? – Richard Hunter Oct 07 '20 at 01:04
  • I'm not sure. When I attach it to the parent div it doesn't display properly. – lawrencehagman Oct 07 '20 at 18:02
  • The first thing to do is to try and attach it and make sure it's there. e.g. give it a background color of red, and make sure it's in front of the "parent" div. – Richard Hunter Oct 07 '20 at 18:03
  • If I create my hierarchy in a code pen the box shadow covers the parent div but not when I do it in my production html. – lawrencehagman Oct 07 '20 at 18:13
  • I'm also attaching the css through cssText so not sure how to apply the 'before' selector. Sorry, it's kind of a mess. – lawrencehagman Oct 07 '20 at 18:36
  • Obviously, it's very difficult to diagnose that without access to the production environment. The best approach with debugging these kind of things is to work out what is working and try and isolate the thing that isn't. Just take small steps and do one thing at a time. – Richard Hunter Oct 07 '20 at 18:38