magnify-image v1.1.2

Magnify Image 🔎

This is a tiny JavaScript package that helps you create image zoom on hover effects.

Usage

Install

yarn add magnify-image
npm install magnify-image

Example

Here's the code used for the preview.

JavaScript

import { MagnifyImage } from "magnify-image";

new MagnifyImage({
  lens: "#lens",
  image: "#image",
  result: "#result",
});

HTML

<div class="flex items-center h-screen p-8">
  <div class="flex gap-8 max-w-3xl mx-auto">
    <div class="relative">
      <div
        class="w-6 h-6 border border-white rounded cursor-none"
        id="lens"
      ></div>

      <img
        class="w-full object-cover rounded-lg"
        src="https://images.unsplash.com/photo-1568193755668-aae18714a9f1"
        id="image"
      />
    </div>

    <div class="flex-shrink-0 w-64 h-64 rounded-lg" id="result"></div>
  </div>
</div>

This uses Tailwind CSS

CSS

#lens,
#result {
  opacity: 0;
  transition: opacity 0.25s ease;
}

#lens[data-magnify-image],
#result[data-magnify-image] {
  opacity: 1;
}

Props

Lens

HTML element that will be used for the lens. Setting this width and height allows you to control the result.

image

Image that is the target of the effect.

Result

HTML element that displays the result.

All three of these elements will have the attribute data-magnify-image added/removed when the hover effect is active/inactive