 			console.log('hi');
 
 			  $("#ancmntDiv").on('mouseenter', function(){
-            			            $(this).animate({ width: "+=20", height: "+=20" });
+            			 $(this).addClass('newsMouseover',1000);
 
 
         		})
         		.on('mouseleave', function(){
-            $(this).animate({  width: "-=20", height: "-=20" });
+           					 $(this).addClass('newsDefault',1000);
         			})
 
 

									</a>
								</td>
								<td>
										<div id="ancmntDiv">
											This is 1111 announcement. It might be about this long. It could tell you things. Bla bla bla. Text goes here. This is 2222 announcement. It might be about this long. It could tell you things. Bla bla bla. Text goes here.240 character limit
										</div>
								</td>

		  #headerLoginDiv{display:none;}
		}

		.newsMouseover {
			border:1px solid red;
			max-width:65%;
			max-height:10em;
			overflow:hidden;
			margin-left:3em;
			padding:10px;
		}
		#newsDefault{
			border:1px solid red;
			max-width:65%;
			max-height:1.2em;
