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

    Next JS Development Service – Features, Pros, Cons, FAQ

    Fundamentally, we believe it is the single most critical benefit in a rapidly evolving digital environment. Since it allows us to swiftly...

    React JS Learning Worth?

    What is the guideline to React JS Learning? There are several clear talents you must master if you want to make a career change...

    React JS vs React Native – Features, Pros & Cons

    Do you have trouble deciding between React JS vs react native for your development process? Do you need a solid web development framework or...

    Next js vs React: Who Wins The Battle

    Next js vs React: Who Wins The Battle Are you a programmer or in charge of your firm's digital strategy? Do you want to build...

    How can artificial intelligence (AI) help an employee’s work performance and proactivity?

    Artificial intelligence can assist human labor by doing inefficient jobs. Human employees may focus on more challenging work while robots and artificial intelligence power...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here