CSS Fade in on hover

Question

I'm currently trying to smooth the image when I hover over some text using CSS. I applied CSS code, but the effect is not displayed; div appears, but without fading.

Also, I understand that CSS transitions do not work with IE. If anyone could point me in the right direction of a workaround for this, that would be very appreciated. (

CSS

.thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: relative; display: none; color: black; text-decoration: none; opacity:0.0; filter:alpha(opacity=0); } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 5px; left: -1000px; border: 1px solid gray; background-color: #fff; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ position: relative; display: inline; top: -290px; left: -25px; opacity:1.0; filter:alpha(opacity=100);/*position where enlarged image should offset horizontally */ -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #networking { width: 200px; height: 140px; margin-left: 360px; top: 115px; position: absolute; background-color: #613286; opacity:1.0; filter:alpha(opacity=100); color: #ffffff; text-align:center; border-radius: 20px; -webkit-transform: rotate(14deg); -moz-transform: rotate(14deg); -ms-transform: rotate(14deg); -o-transform: rotate(14deg); transform: rotate(14deg); } 

HTML:

 <div id="networking"> <a class="thumbnail" href="1.5.2experientialstudios.html#down4"><h4>Networking Lounge</h4> <span><img src="images/net3.jpg" width="250" /></span></a> </div> 

Thanks!

Answer 1

Try removing the display rule:

 .thumbnail span{ /*CSS for enlarged image*/ position: relative; /*display: none; remove this */ color: black; text-decoration: none; opacity:0.0; filter:alpha(opacity=0); } 

Since you have an opacity of 0, you do not need to display: no, and you cannot make the transition between non-displayed at all to embed, since they are different types.

And change this rule:

 .thumbnail:hover span { /*CSS for enlarged image on hover*/ top: 0px; /* adjust as needed */ left: -25px; opacity:1.0; filter:alpha(opacity=100);/*position where enlarged image should offset horizontally */ -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } 

(hovering and then the interval may jump a little).

I also added the ms prefix for transitions. This does not seem to be useful in this context.

For IE9 and below, you can use jQuery to fade in the element (or just use vanilla JavaScript to change the opacity in the setTimeout loop).

Screenshot here:
http://jsfiddle.net/AbdiasSoftware/9rCQv/

That's what you need?