Having issue with hover:after effect in IE8

I have been trying to implement the css effect from this page here: http://sixrevisions.com/css/snazzy-hover-effects-using-css/

I have everything working fine except for the fix he posted for IE8; I added some conditional code so the fix is only used by <= IE8 & hence didn't include the CSS3 reset for normal browsers. However, the fix doesn't seem to have worked, all I see is the text & the text is wrapped at that.

You can see working examples here: http://www.thecssninja.com/demo/css_hover2/

My example I set up is here: http://www.condorstudios.com/example.html

Any ideas why mine isn't working? Only real differences I can see is he is using lists & 开发者_开发问答he has his a tags set as blocks, I tried this but it messes my layout up.

I think it is because you have added (and styled) an element between the container and the image (the <span class="overlay">. I think it is messing up the positioning in IE8. I have made a simple jsfiddle demo that works in Chrome and IE8, based on the original example. Sorry I don't have IE9 or above so cannot verify if this will work.

The only problem I had was that :hover overlay element was too wide, so I added a left:0;right:0 to the class. This may not be exactly what you are after but I hope it helps nonetheless :-)