I'm trying to add shadow to the parent object where an child <img>
element is positioned inside it. I wan the inset shadow to overlap the image.
My HTML code is:
<section class="highlights">
<img src="images/hero.jpg" alt="" />
</section><!-- End section.highlights -->
and CSS:
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
opacity: 0.9;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:1;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
position: relative;
}
.highlights {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
The shadow is not appearing for me. What did I do wrong?
Approach: To give the inset shadow to an element, we will use the box-shadow property. In the box-shadow property, we will define the h-offset value ( It is compulsory for the horizontal shadow effect ), then the v-offset value (It is compulsory for the vertical shadow effect ).
According to the specification, box-shadow applies to all elements. But this is the CSS3 spec, and so only a handful of browsers will support it for now: IE9.
The presence of the inset keyword changes the shadow to one inside the frame (as if the content was debossed inside the box). Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. These are two <length> values to set the shadow offset.
The problem is that the image is rendered over the top of the inset box-shadow.
There are 2 possible ways I can think of doing this, one using opacity on the <img>
to push it behind the shadow and the second way to position the inset shadow over the top of the image. I prefer the second approach because the full opacity of the image can be retained.
Note: I have made the border large and red for demonstration.
Solution 1 demo
HTML
<section class="highlights">
<img src="http://lorempixel.com/500/360/city/1/" alt=""/>
</section>
CSS
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
opacity: .9;
}
.highlights {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 25px 25px red;
}
Solution 2 demo
CSS
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
}
.highlights::before {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 25px 25px red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With