title: CSS Fade in on hover
body: <p>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. </p>
  
  <p>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. (:</p>
  
  <p>CSS:</p>
  
  <pre><code>.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);
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="networking"&gt;
  &lt;a class="thumbnail" href="1.5.2experientialstudios.html#down4"&gt;&lt;h4&gt;Networking Lounge&lt;/h4&gt;    
  &lt;span&gt;&lt;img src="images/net3.jpg" width="250" /&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you!</p>