jQuery Simple Image Inner Zoom On Hover Plugin

Simple Image Zoom is the simplest jQuery solution to zoom in / zoom out on an image on mouseover.

image zoom plugin, inner zoom image jquery, jquery image zoom mobile friendly, click on the image to zoom, zoom image on hover javascript

A Vue Component For Magnifying An Inner Image Zoom Plugin

How to make use of it:

1. Add a CSS class “zoom” to your image.

<img class="zoom" src="1.jpg" alt="img">

2. Wrap the image in a container using the CSS class “zoomIn”.

<div class="zoomIn">
  <img class="zoom" src="1.jpg" alt="img">

3. CSS required for the “zoomIn” container.

.zoomIn {
  overflow: hidden;
  position: relative;
  z-index: 100;
  cursor: crosshair;

4. Include the required jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

5. Javascript to enable the internal zoom effect.

$(document).ready(function () {
  var $container = $('.zoomIn');
  var $image = $container.find('.zoom');
  var $imageW = $image.width();
  var $imageH = $image.height();
  var $containerW = $container.innerWidth($imageW);
  var $containerH = $container.innerHeight($imageH);
  var $imageClone = $image.clone();
  var $imageLarge = $imageClone.width($imageW * 2);
  var imageLargeW = $imageLarge.width();
  var imageLargeH = $imageLarge.height();
    mouseenter: function () {
    mousemove: function (e) {
      var mouseX = e.pageX - $(this).offset().left;
      var mouseY = e.pageY - $(this).offset().top;
      var amountMovedX = Math.round(mouseX / $imageW * 100) / 100 * (imageLargeW - $imageW);
      var amountMovedY = Math.round(mouseY / $imageH * 100) / 100 * (imageLargeH - $imageH);
        'top': amountMovedY + 'px',
        'left': -amountMovedX + 'px',
        'position': 'relative'
    mouseleave: function () {

Simple Image Inner Zoom On Hover Plugin/Github

See Demo And Download

Official Website(ritaD86): Click Here

This superior jQuery/javascript plugin is developed by ritaD86. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…