zoom images in a Datalist

aspx page

<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>

jquery.js

$(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);

  



});

});

style.css

.example

{

    width: 130px;

height: 130px;

}

.imgzoom{



width: 100px;

height: 100px;

margin:10px 0px 0px 15px;Publish Post

background: #f0f0f0;

left: 0; top: 0;



}