More

    React Zoom Image on Hover: How to implement a zoom effect on the images?

    What is a react zoom image on hover?

    React zoom image on hover is a react component that is used to zoom images on desktop browsers on mouse hovering.

    Why are images important?

    Images are beneficial for picturization and to implement a more aesthetic look to the website. Pictures, graphs, info-graphics, etc.., also help us in storytelling without words. Images play a huge role in the impression of the overall website to the visitor. The most pre-eminent technique in UI design is to improvise the website with pictures and render it aesthetically pleasing and informative.

    An E-commerce website essentially needs images as it is convenient for the customers to look into the product details or the service rendered. A blogging website needs pictures so that a reader can relate to the images. And thus, dwell on the concept that the blogger is trying to convey.

    As much as adding the images is significant, zooming in and zooming out also plays an important role. One should implement a zoom effect on the pictures on their website. That ensures the user a better experience over the website.

    How to implement a zoom effect on the images?

    To implement the zoom effect on the images, we can use a component of React JS. React zoom image on hover is the component of React JS used to implement the zoom effect on the pictures on desktop browsers on mouse hovering.

    Installation: 

    We have to install React zoom image on hover via npm.

    npm install react -- cursor - zoom -- save

     

    Basic usage:

    import React from 'react';
    
    import ReactDOM from 'react-dom';
    
    import ReactImageZoom from 'react-image-zoom';
    
    const props = {width: 400, height: 250, zoomWidth: 500, img: "1.jpg"};
    
    ReactDOM.render(<ReactImageZoom {...props} />, document.getElementById('react-app'));

     

    Required propTypes:

     

    Width: 

    “width” is one of the required attributes in React zoom image on hover. We use it to stipulate the width of the source image. 

    It takes only numeric values for input.

    Height: 

    “height” is an optional attribute in React zoom image on hover. We use it to determine the height of the source image. It takes only numeric values for input.

    Browser-calculated height is used in case the same is not provided proactively.

    Img: 

    “img” is an optional attribute in React zoom image on hover. We should provide the URL of the source image if the container does not contain an img element as a tag.

    It only takes string values for input. 

    ZoomScale:

    “ZoomScale” is one of the optional attributes in React zoom image on hover. We use it to stipulate the scale of an image (if ZoomWidth param is provided). 

    It takes only numeric values for input.

    Offset:

    “offset” is one of the optional attributes in React zoom image on hover. We use it to stipulate the offset to an image. 

    It takes only numbers as input for both vertical and horizontal values.

    ZoomWidth:

    “ZoomWidth” is one of the optional attributes in React zoom image on hover. We use it to stipulate the width of the zoomed image. 

    The height of the zoomed image is the same as that of the source image.

    It takes only numbers as input for both vertical and horizontal values.

    ZoomStyle:

    “ZoomStyle” is one of the optional attributes in React zoom image on hover. We use it to stipulate a custom style to the zoomed image. 

    The height of the zoomed image is the same as that of the source image.

    It takes only string values as input.

    Example: ‘opacity: 0.2;background-color: magenta;’.

    ZoomLensStyle:

    “ZoomLensStyle” is similar to ZoomStyle. The effects are proffered to the zoom lens.

    It takes only string values as input.

    Example, ‘opacity: o.2; background-color: offwhite’.

    ZoomPosition:

    “ZoomPosition” is used to stipulate the position of the zoomed image. We can specify the position as right, left, top, bottom although the right is specified by default.

    It takes only string values as input.

     

    Steps to create image zoom on hover effect:

    Step 1: Create an HTML file
    <div class="img-zoom-container">
    <img id="myimage" src="img_girl.jpg" width="300" height="240" alt="Girl">
    <div id="myresult" class="img-zoom-result"></div>
    </div>

     

    Step 2: Create a CSS file
    * {box-sizing: border-box;}
    
    .img-zoom-container {
    position: relative;
    }
    
    .img-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    /*set the size of the lens:*/
    width: 40px;
    height: 40px;
    }
    
    .img-zoom-result {
    border: 1px solid #d4d4d4;
    /*set the size of the result div:*/
    width: 300px;
    height: 300px;
    }

     

    Note: It is important to note that the container must have a “relative” positioning.

    Step 3: Create a JavaScript file
    function imageZoom(imgID, resultID) {
    var img, lens, result, cx, cy;
    img = document.getElementById(imgID);
    result = document.getElementById(resultID);
    /* Create lens: */
    lens = document.createElement("DIV");
    lens.setAttribute("class", "img-zoom-lens");
    /* Insert lens: */
    img.parentElement.insertBefore(lens, img);
    
    cx = result.offsetWidth / lens.offsetWidth;
    cy = result.offsetHeight / lens.offsetHeight;
    
    result.style.backgroundImage = "url('" + img.src + "')";
    result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
    lens.addEventListener("mousemove", moveLens);
    img.addEventListener("mousemove", moveLens);
    lens.addEventListener("touchmove", moveLens);
    img.addEventListener("touchmove", moveLens);
    function moveLens(e) {
    var pos, x, y;
    e.preventDefault();
    pos = getCursorPos(e);
    
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /* Set the position of the lens: */
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /* Display what the lens "sees": */
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
    }
    function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /* Get the x and y positions of the image: */
    a = img.getBoundingClientRect();
    /* Calculate the cursor's x and y coordinates, relative to the image: */
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /* Consider any page scrolling: */
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
    }
    }

     Step 4: Add CSS and JavaScript files in HTML and then initiate the zoom effect

    <script>
    imageZoom("myimage", "myresult");
    </script>

     

    Image Zoom On Hover Examples:

    Image zoom on hover with HTML:
    <style>
    .zoom {
    padding: 50px;
    background-color: green;
    transition: transform .2s; /* Animation */
    width: 200px;
    height: 200px;
    margin: 0 auto;
    }
    
    .zoom:hover {
    transform: scale(1.5); /* (150% zoom)*/
    }
    </style>
    
    <div class="zoom"></div>

     

    Image zoom hover effect with CSS:
    div.image {
    width: 300px;
    height: 200px;
    overflow: hidden;
    }
    div.image img {
    width: 100%;
    height: auto;
    /* SCALE */
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    /* VERZÖGERUNG */
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    }
    div.image img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    }

     

    Conclusion:

    The zooming effect adds to the user experience of the website. Image zoom on hover is highly advanced and the most attractive way to add in the zooming effects.

    We can make use of several props/ attributes to furnish different effects and to magnify the appearance of the zoomed image.

    It is compulsory to give the width of the image. If no height is provided then the browser-defined height will be used in default.

     ZoomWidth, scale, img, offset, zoomStyle, zoomLensStyle, and zoomPosition are the props/ attributes of React zoom on hover.

    Coding is very simple. We can obtain aesthetic and beautiful outputs just by using HTML, CSS, and JavaScript codes for creating web pages and adding zoom effects for the images.

    Recent Articles

    React Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here