Adding an Inset Shadow to an Image Using CSS3

Yesterday PressWork launched a new theme in conjunction with Empire Avenue. The original design had a really nice shadow effect on the images and I wanted to make sure that I could code it using CSS3. The problem was, CSS3 inset shadows don’t work at all on images. The only way to get the effect to work is to use the ::before selector to add a container that can be positioned above the image.

This is how the HTML should look:

<a href="#" class="img-shadow"><img src="http://bavotasan.com/wp-content/uploads/2010/12/lighbulb.jpg" alt="lighbulb" width="200" height="150" /></a>

That will display an image surrounded by an anchor tag.

Here is the CSS3 we need:

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

Here is a live example:

The only concern anyone might have when using this effect is that the container must use the float style in order for it to work properly. If anyone can find a better solution please leave a comment below.