How to zoom a photo in a gridview when hover a mouse ?

Question

I have a gridview and it has a picture in a thumbnail size, that's ok but I want to zoom it if a user hover a mouse on it. I tried many ways but nothing helped.

<asp:TemplateField HeaderText="Fard">
  <ItemTemplate>
    <img src='../SiteImages/<%# Eval("PropertyDetailsFardPath") %>'  width="100"  height="100"/>
  </ItemTemplate>
</asp:TemplateField>

Answer 1

Try,

first find the images from, gridview and then use jquery.mouseover and jquery.mouseleave function.

<script language="javascript" type="text/javascript" >
    $().ready(function () {
        $("img").mouseover(function () { $(this).width(200); $(this).height(200) });
        $("img").mouseleave(function () { $(this).width(100); $(this).height(100) });
    })
</script>

Above code will only increase the Image Height and Width.

if you want to apply the data-zoom-image then you need to use 3rd part .Js plugins.

for the plugins see Here and Here