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:

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.