This solution will provide you zooming of the image present in GridView whenever mouse pointer hovers over it.
Step-1: Add GridView & Databinding for it according to your requirement.Change "AutoGenerateColumns" property of Gridview to False.
I hope you know how to use Templates to Show data in GridView.
So now add an Image control under Item Template as following:
<asp:TemplateField HeaderText="Employee Image">
<ItemTemplate>
<asp:Image ID="gvImg" runat="server" ImageUrl="~/Images/1.jpg" CssClass="default" />
</ItemTemplate>
</asp:TemplateField>
I've used a CSS Class, which I've provided below & an Image just for demo.You can use them according to your requirement.
Step-2: Write the following jQuery code in your page under Head section:
<style>
.default
{
width: 75px;
height: 75px;
}
</style>
<script src="Scripts/jquery-1.8.3.js"></script>
<script>
$(document).ready(function () {
$('.default').each(function () {
$(this).hover(function () {
$(this).animate({ width:100,height:120 }, 500);
},
function () {
$(this).animate({ width:75,height:75 }, 250);
});
});
});
</script>
Hover event takes 2 Functions.1st one when mouse pointer comes over Image & 2nd Function when mouse pointer goes out of Image control.
Now whenever mouse pointer will come over the Image control present in GridView, it'll zoom in & when mouse pointer goes out it'll zoom out.
Still you didn't get any point feel free to ask.