title: CSS Smooth fade and out transition (including text)
body: <p>I have a simple hover effect that changes the text and background. What I would like to know is if there is a possible way to slow down the fade effect... I'm sure you can using the transition css but I have little knowledge on how to use it. </p>
  
  <p>(The code is not full code and does not work correctly (but should be enough))</p>
  
  <p>Here is HTML:</p>
  
  <pre><code>&lt;div id="ourproductsleft" class="grid_3 alpha"&gt;
         &lt;h4&gt;Mail&lt;/h4&gt;
         &lt;img class="replies" src="img/index/body/ourproducts/mail_accept.png"/&gt;
         &lt;p class="comment"&gt;Packed with features and backed by our 1st class technical support, Data Connectivity email hosting is the smart choice for both personal and business users.&lt;/p&gt;
         &lt;br&gt;
         &lt;br&gt;
         &lt;p class="comment2"&gt; &lt;a href="&lt;%= url_prefix %&gt;hosting.html"&gt;For more Information on our &lt;u&gt;Mail&lt;/u&gt; service.&lt;/a&gt; &lt;/p&gt;         
         &lt;/div&gt; &lt;!--end of ourproductsleft class 3--&gt;
  </code></pre>
  
  <p>Here is CSS</p>
  
  <pre><code>/*Backgrounds for each div*/
  #ourproductsleft {
  background: #F2F7FA;
  /*background-image:url(../img/index/body/ourproducts/grey.png);
  background-repeat:repeat;*/
  border-radius: 0px;
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;   
  }
  
  /*Hover bacgrounds for each div*/
  #ourproductsleft:hover {
  background-  image:url(../img/index/body/ourproducts/light_blue_background_pattern.jpg);
  background-repeat:repeat;
  }
  
  
  /*Do not display original (mail, domain etc) text on hover view*/
  #ourproductsleft:hover .replies { 
  display: none;
  
  }
  
  /*Keep display inline for maintext (longtext) on hover */
  #ourproductsleft:hover .comment { 
  display: inline;
  opacity: 1; 
  }
  </code></pre>
  
  <p>I have also made a <a href="http://jsfiddle.net/8kW7y/" rel="nofollow">DEMO</a></p>