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="http://presswork.me/themes/socialstock/" class="img-shadow"><img src="http://presswork.me/wp-content/uploads/2011/09/socialstock_home.jpg" alt="" />a>

That will display an image surrounded by an anchor tag.

Here is the CSS3 we need:

.img-shadow {