Question

I asked a question yesterday about applying an uneven shadow with CSS3, ultimately the end result was this (which I was really impressed with!)

Unfortunately, when I started trying to use this on images, I end up with this (the shadow doesn’t appear at all)

I can’t seem to figure out why this happens, I’ve tried eliminating the alt text (which doesn’t help) however giving the img a blank src attribute fixes it (obviously though I don’t want to do this!)

All I can think is that it might be something to do with the content:"" css? I’ve tried messing with it but get nowhere.

I could use a div to wrap the img, and give that the class, but ultimately I want to avoid this.

Answer 1

So just put the image inside such a div. Will that be acceptable? Like this:

<div class="container"><img src="http://intelligentpenguin.co.uk/blank_story.gif" alt="" /></div>

http://jsfiddle.net/qUpZX/4/

There is a related question here

Apparently it has to do with the “before” and “after” pseudo-classes.