jquery - Upscaling and Fadeout effect -

i have div in webpage. on hover of div want upscale , fadeout @ same time. using css , jquery. fiddle-->http://jsfiddle.net/tdatq/

currently effect text upscales , fades out. want simultaneously. text in div looses position while upscaling. please

here code html

<div id="tweets" class='fade'>         hello world     <div>  

css

#tweets{     width:250px;     margin:auto;     margin-top:30px;     background-color:#fff;     color:#00eaff; } #tweets:hover{     -webkit-transform: scale(2.0);           transform: scale(2.0); } 

jquery

$("div.fade").hover(  function(){$(this).fadeout(1900);             }  ); 

you dont need jquery that, here css solution

#tweets{     width:250px;     margin:auto;     margin-top:30px;     background-color:#fff;     color:#00eaff;     -webkit-transition: 2s; /* transition */     -moz-transition: 2s;     -ms-transition: 2s;     -o-transition: 2s;     transition: 2s; } #tweets:hover{     -webkit-transform: scale(2.0);           transform: scale(2.0);     opacity:0;         /* fadeout */ } 

fiddle:

http://jsfiddle.net/tdatq/1/

update:

this fiddle text stays in middle

http://jsfiddle.net/tdatq/2/