how to zoom image in side like in shopping site???
when we put mouse over the particular portion of of image,that portion zooms in the side.
how to do this with simple codes???
Thanks
Ref:
https://github.com/CSS-Tricks/AnythingZoomer
Download the project from the above link.
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="http://fonts.googleapis.com/css?family=Merienda+One" rel="stylesheet" /> <link rel="stylesheet" href="demo/style.css" /> <link rel="stylesheet" href="css/anythingzoomer.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.anythingzoomer.js"></script> <style type="text/css"> .zoom { width: 500px; } .small img { width: 250px; height: 167px; } .large img { width: 500px; height: 333px; background: white; } </style> <script type="text/javascript"> $(function () { $("#zoom").anythingZoomer(); }); </script> </head> <body> <div> <div id="zoom"> <div class="small"> <img src="demo/rushmore_small.jpg" alt="small rushmore" /> </div> <div class="large"> <img src="demo/rushmore.jpg" alt="big rushmore" /> </div> </div> </div> </body> </html>
Screenshot
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.