CSS Fade in on hover - css

Question

I'm currently attempting to have a with an image fade in when I hover over some text using CSS. I've applied the CSS code, but the effect doesn't show; the div appears, but without the fade-in.
Also, I realize that CSS transitions don't really work with IE. If anyone could point me in the right direction of a workaround for that, it would be much 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>
Thank you!

Answer 1

Try with removing your 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);
}
As you have opacity 0 you won't need display:none and you can't make a transition between not displayed at all to inlined as they are different types.
And modify 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;
}
(the hover and then span can make it a bit jumpy).
I also added a ms prefixed version to transitions. It is apparently not useful in this context.
For IE9 and below you can use jQuery to fade in an element (or simply use vanilla JavaScript to modify the opacity in a setTimeout loop).
Fiddle here:
http://jsfiddle.net/AbdiasSoftware/9rCQv/
Is this what you're after?