Geek Answers Handbook

Add CSS tag to insert into parent element on top of child image

I am trying to add a shadow to the parent where the <img> child element is placed in it. I lost the nested 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); }

A shadow does not appear to me. What have I done wrong?

+7
css css3 shadow
source share
1 answer

The problem is that the image is displayed over the top of the insertion shadow.

There are two possible ways to do this, using the opacity on <img> to push it behind the shadow, and the second is to put the insert at the top of the image. I prefer the second approach, because the full opacity of the image can be preserved.

Note. I made the border large and red for demonstration.

Demo Solution 1

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; }

Demo version of Solution 2

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: ""; }
+16
source share

More articles:


All Articles