Bottom to Up Image Transition Effect
Today i will introduce very simple code snippet for applying image transition effect by using jQuery and CSS, now let us go to directly to HTML

 <div class="wrapper">  
     <div class="facesDiv">  
       <img src="images/03.png" width="128" height="100" originalheight="100" hoverheight="128"  
         hoverimage="images/03_hover.png" class="face" style="left: 0;" alt="face" />  
       <img src="images/02.png" width="128" height="100" originalheight="100" hoverheight="128"  
         hoverimage="images/02_hover.png" class="face" style="left: 128px;" alt="face" />  
       <img src="images/01.png" width="128" height="100" originalheight="100" hoverheight="128"  
         hoverimage="images/01_hover.png" class="face" style="left: 256px;" alt="face" />  
     </div>  
   </div>  

only 3 images as sample with known HEIGHT and WIDTH, give them the same class to be handled by jQuery and CSS such "face" also specify three nonstandard attributes to be handled by jQuery code as the following

1. originalheight: this is the original image height.
2. hoverheight: the maximum height after hover action.
3. hoverimage: the image to be replaced after hover action.

also let us take a look on the JavaScript

 <script type="text/javascript">  
     $(document).ready(function () {  
       var navHeight = 0;  
       var tmpimage = '';  
       $('img.face').mouseenter(function () {  
         tmpimage = $(this).attr('src');  
         navHeight = $(this).attr('hoverheight') - $(this).attr('originalheight');  
         $(this).attr('src', $(this).attr('hoverimage'));  
         $(this).animate(  
         {  
           top: "-=" + navHeight,  
           height: "+=" + navHeight,  
           duration: 1000  
         });  
       }).mouseleave(function () {  
         $(this).attr('src', tmpimage);  
         $(this).animate(  
         {  
           top: "+=" + navHeight,  
           height: "-=" + navHeight,  
           duration: 1000  
         });  
       });  
     });  
   </script>  

and finally the CSS

 body  
 {  
   padding: 0px;  
   margin: 0px;  
 }  
 .wrapper  
 {  
   width: 384px;  
   height: 500px;  
   margin: auto;  
   text-align: center;  
 }  
 .facesDiv  
 {  
   position: relative;  
   height: 100px;  
   top: 200px;  
   margin: 0;  
   padding: 0;  
 }  
 .face  
 {  
   position: absolute;  
   float: left;  
   bottom: 0;  
 }  

for a complete sample, you can download the file  here