Javascript Image Inner Zoom & Magnifier On Hover

The focus.js is an excellent Javascript plugin that allows you to create the Inner Image Zoom effect. Basically when the user mouse over the image, the image will itself Zoom and stay within the container.

It will Zoom out the images to view more clearly. It works with mouse over the images to show the zoomer version of an image.

Additionally, it is a Simple Javascript Image Magnifier plugin that easies to implement on any kind of website. You can easily customize it by just changing its options and settings.

Furthermore, It is an ES6 and Vanilla Javascript plugin that allows creating a smooth and interactive image inner zoom functionality.

This functionality reacts to the mouse movement. The user moves the mouse cursor over the image to enlarge the image area and see it more clearly.

How to Create Image Inner Zoom & Magnifier On Hover

You have to include two main files of this plugin to start implementing. It provides you stylesheet and Javascript file which you need to add to your webpage.

<link href='focus.min.css' rel='stylesheet'/>
<script src='focus.min.js'></script>

The HTML is simple and easy to understand. You can define a  figure element and then add the image by defining a style. To implement the Zoom effect, you need to add class focus-img and smoother.

<figure class='fig focus-img smoother cursor-arrow' style='background-image: url("https://source.unsplash.com/category/nature/1024x768");'></figure>

After adding the tag to the page, initialize the library with a config object (params could be excluded).

<script>
    Focus.init({
        elementID: '',
        zoomFactor: '250%'
    });
</script>

If you keep the elementID blank, the inner zoom animation will apply entirely the page and all images on page produce the zoomer effect.

To target the specify set of images, you need to assign the ID to the elementID

The plugin provides many more options to customize it as per your needs.  All default options to customize the focus.js.

let config = {
    imageSrc: 'https://source.unsplash.com/category/nature/1024x768',
    parentElement: null,
    zoomFactor: '250%',
    smoother: true,
    width: '100%', // Scale to parent component by default
    height: '66.7%', // Scale to percent of height by default
    cursor: '', // Leave blank for default cursor
    displayLoc: true,
    displayZoom: true,
    zoomOnScroll: true,
};
new FocusImage(config); // Object will automatically be appended to the parent element

That’s it.