Comments on: Snazzy Hover Effects Using CSS

By: Joesanti

Joesanti — Sun, 20 Nov 2011 06:46:53 +0000

Now, I don’t have to use jquery to get such cool transition. Thank you!

By: ahmad balavipour

ahmad balavipour — Mon, 31 Oct 2011 10:01:42 +0000

Thanks alot,

very good tutorial

By: Somer Sudduth

Somer Sudduth — Wed, 26 Oct 2011 21:45:16 +0000

It is really a great and helpful piece of info. I am glad that you just shared this useful tidbit with us. Please stay us informed like this. Thanks for sharing.

By: Billy Walker

Billy Walker — Fri, 07 Oct 2011 21:38:27 +0000

I got around the IE Fix by directly defining my anchor class a high z-index, as all of the hover attributes was defined by this class.

I then gave the img within this anchor a negative z-index to push it behind the rest of the class.

a.class {position:relative; z-index:2000;}
a.class img {position:relative; z-index:-1}

worked like a charm, although in IE the transparency has gone but i can live with that.

Time to finish my glass of wine!

By: Daniel List

Daniel List — Thu, 07 Jul 2011 07:48:39 +0000

Thank you for such a great tutorial, however I am running into some IE issues.

I have the effect working lovely on FF with a semi transparent box and black text. However in IE it doesn’t show a background color for the div.

I created an IE.css stylesheet which is conditionally referenced, and set the background-color to white, which doesn’t work.

Strangely enough, if I move the div from over the top of the image to underneath it, then the background colour will show.

Anyone have any idea what the problem is?

By: bee

bee — Thu, 23 Jun 2011 08:09:46 +0000

Thanks Ryan!!! Definitely going to use this!!!

By: Ivan

Ivan — Mon, 20 Jun 2011 09:09:41 +0000

Pretty neat, I gave it a shot, and it worked great.
BUT…
I decided to alter the display property of a span element nested inside my links instead – because I couldn’t stand the browser generated tooltip, which simply re-states the contents of the ‘title’ attribute.

As far as I learned, the tooltip is a browser-dependent element and therefore there is no way of getting around it’s display without resorting to Javascript.

Still, I can see myself relying on this for image overlays.

By: Brett

Brett — Fri, 27 May 2011 13:08:18 +0000

Thanks for the great tut; however no matter what I do I cannot get it to work in IE8 even after setting the z-index to negative etc….. all I see is the text. :(

By: neelhaam

neelhaam — Fri, 27 May 2011 07:20:13 +0000

Hay it really good & work fine you can post an ad click my name.

By: Ryan

Ryan — Thu, 05 May 2011 00:46:03 +0000

Just a note that there should be a very slight adjustment to the list item. It should have z-index: 1; applied to it. Otherwise if the list appears within a container that has a background colour in IE8 it will appear behind it the demo has been updated.

http://www.thecssninja.com/demo/css_hover2/