Any way to get box-shadow only on content-box - css

Question

It would be lovely to have the option of where to place a box-shadow. Currently I have a div with some padding. The background color is set to clip on the content-box. That's good. However the box-shadow that I have appear on hover begins at the border-box. Perhaps there is some super secret css I don't know (one can wish, right?)
I know I can add another div after .wrapper, but I'm looking to avoid that. More curious if it is actually possible to position the box-shadow on the content-box.
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height:100%;
width: 100%;
}
.container {
width: 30%;
margin: 0 auto;
padding-top: 50px;
}
.wrapper {
padding-bottom: 1em;
padding-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
transition: box-shadow 0.2s ease-in-out 0s;
background-clip:content-box;
}
.wrapper:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>

Answer 1

You do already have this wrapper you talk about , the <a> around it.
You need to style it too and apply the shadow to it:
.wrapper a {
padding-bottom:1px;/* to deal with collapsing margin if not reset (to <p> here) */
display:block;
transition: box-shadow 0.2s ease-in-out 0s;
}
.wrapper a:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height:100%;
width: 100%;
}
.container {
width: 30%;
margin: 0 auto;
padding-top: 50px;
}
.wrapper {
padding-bottom: 1em;
padding-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
background-clip:content-box;
}
.wrapper a {
padding-bottom:1px;
display:block;
transition: box-shadow 0.2s ease-in-out 0s;
}
.wrapper a:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>
pseudo approach
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height:100%;
width: 100%;
}
.container {
width: 30%;
margin: 0 auto;
padding-top: 50px;
}
.wrapper {
padding-bottom: 1em;
padding-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
background-clip:content-box;
position:relative;
}
.wrapper:before {
content:'';
position:absolute;
pointer-events:none; /* allow to reach links or inside wrapper content */
top:0;
bottom:1em;
left:0;
right:1em;
transition: box-shadow 0.2s ease-in-out 0s;
}
.wrapper:hover:before {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>

Answer 2

Just use margin-bottom: 1em; margin-right: 1em; in your wrapper instead of padding.
CODE SNIPPET:
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height:100%;
width: 100%;
}
.container {
width: 30%;
margin: 0 auto;
padding-top: 50px;
}
.wrapper {
margin-bottom: 1em;
margin-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
transition: box-shadow 0.2s ease-in-out 0s;
background-clip:content-box;
}
.wrapper:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>

Answer 3

Another way is to apply the padding-top to the .page class instead of the .container class. A code snippet below might explain
.page {
background: #e9e9e9 none repeat scroll 0 0;
min-height: 100vh;
height: 100%;
width: 100%;
padding-top: 50px;
}
.container {
width: 30%;
margin: 0 auto;
}
.wrapper {
padding-bottom: 1em;
padding-right: 1em;
background: white none repeat scroll 0 0;
color: #666;
transition: box-shadow 0.2s ease-in-out 0s;
}
.wrapper:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img {
width: 100%;
background-clip: content-box;
}
<div class="page">
<div class="container">
<div class="wrapper">
<a href="#">
<img src="http://placekitten.com/g/330/175">
<div class="content-wrapper">
<h4>Events</h4>
<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
</div>
</a>
</div>
</div>
</div>

Answer 4

Here's a solution that works with background-clip:content-box;
Use the following instead of box-shadow :
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
-webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));