You need to use jQuery
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type = "text/javascript">
$(".pic").live("mouseover, mousemove", function (e) {
var dv = $("#popup");
if (dv.length == 0) {
var src = $(this)[0].src;
var dv = $("<div />").css({ height: 100, width: 100, position: "absolute" });
var img = $("<img />").css({ height: 100, width: 100 }).attr("src", src);
dv.append(img);
dv.attr("id", "popup");
$("body").append(dv);
}
dv.css({ left: e.pageX, top: e.pageY });
});
$(".pic").live("mouseout", function () {
$("#popup").remove();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns = "false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="Image1" CssClass = "pic" style = "cursor:pointer" runat="server" Height = "100" Width = "100" ImageUrl = '<%# Eval("ImageUrl") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</form>
</body>
</html>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[1] { new DataColumn("ImageUrl") });
dt.Rows.Add("http://www.aspforums.net/Avatars/Mudassar.jpg");
dt.Rows.Add("http://www.aspforums.net/Avatars/shivanand.jpg");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Demo