Essentially, you must use opacity with a transitions rather than display:none
as the latter is not 'transitionable'. There are other options depending on what effect you are after but this is the basics.
HTML
<div id="ourproductsleft" class="grid_3 alpha">
<h4>Mail</h4>
<img class="replies" src="img/index/body/ourproducts/mail_accept.png"/>
<p class="comment">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.</p>
<p class="comment2"> <a href="<%= url_prefix %>hosting.html">For more Information on our <u>Mail</u> service.</a> </p>
</div> <!--end of ourproductsleft class 3-->
CSS
/*Backgrounds for each div*/
#ourproductsleft {
background: #F2F7FA;
border-radius: 0px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}
#ourproductsleft .comment,
#ourproductsleft .replies {
opacity: 0;
transition: opacity 1s ease;
}
#ourproductsleft:hover .comment,
#ourproductsleft:hover .replies{
opacity: 1;
}