How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

In this blog i am going to show we could show enlarded image when hover on Link or an image like we see on any e-commerce website.

First of all right click on your application >> Select Add New Folder and Give name as images >> Once folder created place some images in folder to show preview of images when hover on link using JQuery in

After completion of folder creation and insertion of images in folder write the following code in your aspx page ::

  • Put the below code inside the <heaD> tag::

 <script type="text/javascript" src="">
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
    // Configuration of the x and y offsets
    function ShowPreview() {
        xOffset = -20;
        yOffset = 0;

        $("a.preview").hover(function (e) {
            this.t = this.title;
            this.title = "";
            var c = (this.t != "") ? "<br/>" + this.t : "";
            $("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' />" + c + "</p>");
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px")

function () {
    this.title = this.t;

        $("a.preview").mousemove(function (e) {
.css("top", (e.pageY - xOffset) + "px")
.css("left", (e.pageX + yOffset) + "px");

 <style type="text/css">
border:1px solid #ccc;
box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);

And then the put the below code inside <body> tag ::

        <asp:DataList ID="DataList1" RepeatColumns="2" CellPadding="5" runat="server">
<asp:HyperLink ID="HyperLink1" class="preview" ToolTip='<%#Bind("Name") %>' NavigateUrl='<%# Bind("Name", "~/images/{0}") %>' runat="server">
<asp:Image Width="100" ID="Image1" ImageUrl='<%# Bind("Name", "~/images/{0}") %>' runat="server" />
 <ItemStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center"
VerticalAlign="Bottom" />

  • Now add the below code inside your Code page(.cs) ::

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using System.IO;

public partial class ChangeImageSize : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    protected void BindDataList()
        DirectoryInfo dir = new DirectoryInfo(MapPath("images"));
        FileInfo[] files = dir.GetFiles();
        ArrayList listitem = new ArrayList();
        foreach (FileInfo info in files)
        DataList1.DataSource = listitem;


Popular posts from this blog

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free

Show GridView row details in tooltip on mouseover with jQuery using inside GridView in c#

go to top image