ASP.NET C# How to enlarge GridView DataBound imageField picture when hoverover?

Question

I am doing school work and need some help, I want the image in a 'Relevant Information' ImageField column that is DataBound to be enlarged when hoverover. Here are my codes:

    <div style="height:200px; width: 610px; overflow: auto;">
                <asp:GridView ID="GV_insView" runat="server"
            AutoGenerateColumns="False"
            CssClass="Grid" AlternatingRowStyle-CssClass="alt" Width="511px">
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
            <Columns>
                <asp:BoundField HeaderText="Customer ID" DataField="NRIC" />
                <asp:BoundField HeaderText="Insurance Type" DataField="insType" />
                <asp:BoundField HeaderText="Date Filed" DataField="dateFiled" DataFormatString="{0:dd/MM/yyyy}"/>
            <asp:ImageField HeaderText="Relevant Information" DataImageUrlField="relInfo" ControlStyle-Width="100" ControlStyle-Height="100"> 
              </asp:ImageField>
            </Columns>
        </asp:gridview>
                    </div>

Answer 1

You have to write custom JavaScript Function and CSS to support this.

Please find the example code below for how you can do this.

<script type="text/javascript">
    $(function () {
        $("[id*=GridView1] td").hover(function () {
            $("td", $(this).closest("tr")).addClass("hover_row");
        },function(){
            $("td", $(this).closest("tr")).removeClass("hover_row");
        });
    });
</script>

and the CSS you will use CSS3 property of transform Scale to enlarge on hover.

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    td
    {

    }
    .hover_row
    {
        -ms-transform: scale(2, 3); /* IE 9 */
        -webkit-transform: scale(2, 3); /* Safari */
         transform: scale(2, 3);
    }
</style>

For complete solution you can check this link which is the source of the information above. Change row color on GridView Hover ASP Snippets

For only one boundfield to have some specific CSS you can try this.

<asp:BoundField DataField="Count" HeaderText="Count">
    <ItemStyle CssClass="yourclass"></ItemStyle>
</asp:BoundField>

This way, all boundfields of Image will get that CSS class of hover.

Hope this helps.