Keeping the box-shadow when visibility is hidden

Issue

I'm trying to hide an element but keep it's shadow visible. For example:

// html
<div id="c1" class="cont"></div>
<div id="c2" class="cont"></div>

And:

// css
html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
}

.cont {
  width: 150px;
  height: 150px;
  margin: 30px 15px;
  box-shadow: 0px 10px 22px #808aa8;
  background-color: #c2cff2;
}

#c2 {
  visibility: hidden;
}

(code in JSFiddle)

I want c2 to be hidden (the background shouldn't be visible), but the shadow should be visible.
Right now you can see c1.

I can wrap each such div in another container, and hide the inner div while having the shadow on the container, but I was wondering if it's somehow possible without it.

Solution

You could achieve this by abandoning visibility: hidden;. If you fade out the background, and remove pointer-events from the element, it should give the same effect.

body {
  background-color: #ffffff;
}

.cont {
  width: 150px;
  height: 150px;
  margin: 30px 15px;
  box-shadow: 0px 10px 22px #808aa8;
  background-color: #c2cff2;
}

#c2 {
  color: transparent;
  background-color: transparent;
  pointer-events: none;
}
#c2 > * {
  display: none;
}

<div id="c1" class="cont">
  Hello <img src="#">
</div>
<div id="c2" class="cont">
  Hello <img src="#">
</div>

The pointer-events: none; style allows the element to be "clicked through" meaning that anything underneath (form elements, buttons etc) can still be interacted with, so depending on your requirements you may not actually need it.

If the elements have content that also need to be faded out, you can set the color: transparent on the parent to hide any text and then set any child elements to be hidden with the #c2 > * rule.

Answered By - Luke