Place box-shadow behind sibling in CSS

Question

I would like a series of divs with no margin and both top and bottom box shadows such that the box shadows of each div do not overlap any other divs. I've constructed a jsfiddle to show what I'm trying to achieve and what I have now. This seems like something that z-index could be used for, but I'm not sure how.

Answer 1

Put all of your DIVs in one outer wrapper DIV. Apply a box shadow to that, and to the hover state of each internal DIV. Now each can be controlled independentaly.

<div class="outer">
  <div class="inner">The box shadow from each div...</div>
  <div class="inner">...should go under each other div.</div>
  <div class="inner">The whole thing should look...</div>
  <div class="inner">...like one big div with a shadow...</div>
  <div class="inner">...unless you hover over one.</div>
</div>

div.outer {
  background: #fff;
  margin: 0px auto;
  padding: 0px;
  width: 300px;
  cursor: pointer;
  box-shadow: 0px 0px 3px #999;
  transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}

div.outer:hover {
  box-shadow: none;   
}

div.inner {
  padding: 20px;
  transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out; 
}

div.inner:hover {
  padding: 20px;
  box-shadow: 0px 0px 5px #666;
  margin-left: -20px
  width: 350px;
}

I've styled this such that the box shadow on the outer DIV disappears when you hover over it, so only the hovered innerDIV shows a shadow. Adjust to taste :)

Fiddle: https://jsfiddle.net/ehxsdjr8/7/

Answer 2

Are you looking for something like this?

Fiddle

$( 'div' ).hover(
  function() {
    $(this).addClass( "hey" );
    $('div').not(this).addClass( "heyho" );
  }, function() {
      $(this).removeClass( "hey" );
    $('div').not(this).removeClass( "heyho" );
  }
);

div {
    background: #fff;
    margin: 0px auto;
    padding: 15px;
    width: 300px;
    cursor: pointer;
    box-shadow: 0px 0px 3px #999;
    transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
.hey{
    padding: 20px;
    box-shadow: 0px 0px 5px #666;
    margin: 15px auto;
    width: 350px;
}
.heyho {
    box-shadow: 0px 0px 5px #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>The box shadow from each div...</div>
<div>...should go under each other div.</div>
<div>The whole thing should look...</div>
<div>...like one big div with a shadow...</div>
<div>...unless you hover over one.</div>

Answer 3

https://jsfiddle.net/ehxsdjr8/13

The trick here is to add multiple shadows to each div and turn them on/off as needed. In this case, add the top shadow for the first element and the first element after a hover only and modify the existing shadow to not go above the element.

div {
    background: #fff;
    margin: 0px auto;
    padding: 15px;
    width: 300px;
    cursor: pointer;
    box-shadow: 0px 3px 3px #999;
    transition:
        padding .1s ease-in-out,
        width .1s ease-in-out,
        box-shadow .1s ease-in-out;
}
div:hover {
    padding: 20px;
    box-shadow: 0px 0px 5px #666;
    margin: 15px auto;
    width: 350px;
}
div:hover + div {
    box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type {
    box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type:hover {
    box-shadow: 0px 0px 5px #666;
}

It'll take a lot of playing around to get this to look right.