simple way to zoom images in a datalist (images are retrieved from the database)

<asp:DataList  ID="grdProducts" runat="server" CssClass="gridproducts" RepeatDirection="Horizontal" RepeatColumns="5">       
        <ItemTemplate  >
        <div >
        <table>
        <tr>
        <td>
        <div class="example">	
<asp:Image Height="100" Width="100" ID="img1" class="imgzoom"  runat="server" ImageUrl='<%#Eval("images","..\\images/{0}") %>' AlternateText='<%#DataBinder.Eval(Container.DataItem,"price")%>'    /></div>
  </td></tr>
     </table> 
   </div>    
        </ItemTemplate>
        </asp:DataList>

$(document).ready(function() {

$(".example").hover(function() {

    $(this).find('.imgzoom').addClass("hover").stop().animate({
    		    marginTop: '0px',
                                    marginLeft: '0px',
		    width: '125px', /* Set new width */
		    height: '125px', /* Set new height */
		    padding: '0px'
		}, 500);
		
		}, function() {
$(this).find(".imgzoom").removeClass("hover").stop().animate({
		 		     marginTop: '10px',
                                     marginLeft: '15px',
		    width: '100px', /* Set width back to default */
		    height: '100px', /* Set height back to default */
		    padding: '0px'
		}, 500);
		

});
});

.example
{
    width: 130px;
height: 130px;
}
.imgzoom{

width: 100px;
height: 100px;
margin:10px 0px 0px 15px;
background: #f0f0f0;
left: 0; top: 0;

}