Menu
I have an image on my page which i want to put an inset box shadow on. I have tried doing this with the image both in, and out, of a div. Can anyone help me to get an inset box shadow to display?
HTML:
<body>
<div id="logo">
<img src="images/key.jpg" width="3%" height="3%"/>
</div>
<a href="scene2.html" class="next">Next</a>
<a href="abduction.html" class="back">Back</a>
<img src="images/scene1.jpg" width="650" height="650" class="backing"/>
</body>
</html>
CSS
.backing {
position:relative;
z-index:-10;
float:left;
margin-left:12%;
box-shadow: 0 0 -50px -50px #FFF;
-moz-box-shadow: 0 0 -50px -50px #FFF;
-webkit-box-shadow: 0 0 -50px -50px #FFF;
}
.next {
position:relative;
margin-left:8%;
z-index:200;
}
.back {
position:relative;
margin-left:2%;
z-index:220;
}
369
You just need to change the box-shadow line to get the desired result: box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.05); The first and second numbers stand for the x- and y-offsets of the shadow which should be 0 because the shadow is directly under the image.
Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. <offset-x> <offset-y> These are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element.
Box-shadow inset will not work on image, you need to create a div and give box-shadow to that div and put image inside that div.
You can also use a negative z-index on the img element, and use the box-shadow with inset value on the div element.
div {
position: relative; /* Not required now */
margin: 10px;
float: left;
box-shadow: inset 0 0 12px blue;
border-radius: 50%;
}
div img {
display: block;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
z-index: -1;
}
Demo
140
Here’s a clean, simple and modern approach of CSS pseudo-elements to place a box shadow “on top of an image”, since img tags themselves don’t support pseudo-elements.
HTML:
<div class="box-shadow">
<img src="http://i.stack.imgur.com/8LzBY.jpg" />
</div>
CSS:
.box-shadow {
position: relative;
text-align: center;
}
.box-shadow::after {
box-shadow: inset 0 0 10px 10px #000;
bottom: 0;
content: "";
display: block;
left: 0;
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.box-shadow img {
max-width: 100%;
width: auto;
}
View the accompanying JSFiddle.
41
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
