how to enlarge the text ? Image on hover using animate function in JQuery

You have seen many websites, on hover of the image or text it enlarges.
In this tutorial, we will go with a simple example,
We will increase font size of a text on hover.

HTML Structure:
<div class="wrapper">
    <p><span>W</span></p>
    <p><span>E</span></p>
    <p><span>B</span></p>
    <p><span>B</span></p>
    <p><span>Y</span></p>
</div>

CSS:
.wrapper{width:500px;height:300px;margin:0 auto;padding:0 0 0 30px}
.wrapper p{font-family:Arial;font-size:40px;padding:20px;float:left;}

Jquery code:
Include the Jquery library first and then go with the below code.


$(document).ready(function(){
    $("p span").hover(function(){       
        $(this).animate({"font-size" : '+=20'});   
    },function(){
        $(this).animate({"font-size" : '-=20'});
    });
});

Explaination:
We have a set of alphabets, each wrapped in span, inside a p tag. You can have your own structure.
Now on hover of span, we are increasing the fontsize by 20 pixels, and on hover out, we are decreasing it by same number of pixels, so that it resets back to same original pixel size.

Click Here to view the demo