Place box-shadow behind sibling in CSS - 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.