Website Things

Adding an Inset Shadow to an Image Using CSS

Posted on Tuesday, April 30, 2013
I was working on a new site and want to make it as dynamic as possible but i dont want to sacrifice the design. To do that, I found this CSS that adds an inset shadow to an image, and it works great! HTML:

CSS:
.img-shadow {
position: relative;
max-width: 100%;
float: left;
}
.img-shadow::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0,0,0,.6);
-moz-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}
.img-shadow img {
float: left;
}