Edit Question - KnowledgeHub

Title Body

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!

Tags (comma-separated) Cancel