More

    React Zoom Image on Hover (With Examples)

    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.

    Installation: 

    We need to install this component 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’));

     

    propTypes Required:

    width

    It is used to specify width of the source image. It is a required attribute and takes numeric inputs only.

    height

    It determines the height of the source image. Like width this also takes only numeric inputs. It is an optional prop. If the height is not provided then browser calculated height is used.

    img

    We need to provide the url of the source image. It should be a string.

    scale

    It specifies the scale of an image and uses only numbers as input.

    offset

    It provides an offset to an image. {vertical: number, horizontal: number}

    zoomWidth

    Provide width of zoomed image. Height of the zoomed image is equal to that of the source image.

    zoomStyle

    It is simply a custom style applied to the zoomed image. Example, ‘opacity: 0.1; background-color: gray’.

    zoomLensStyle

    It is similar to zoomStyle but effects are given to the zoom lens. Example, ‘opacity: o.i; background-color: gray’

    zoomPosition

    It specifies the position of the zoomed image. We can set the positions as top, left, right, bottom, original. By default right is specified.

     

    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:

    Image zoom on hover is a very advanced and attractive way of zooming effects. We can have a number of props or attributes to give different effects and enhance the appearance of the zoomed image. It is compulsory to provide the width of the image. If no height is provided then browser defined height will be used as default.

    In this package, along with width and height, we will find zoomWidth, scale, img, offset, zoom style, zoom lens style and zoom position too. Coding is easy and just by creating simple HTML, CSS and JavaScript codes and adding zoom effects we can obtain the required output.

     

     

    Recent Articles

    React Ecommerce Templates

      React is the most popular library for the development of e-commerce applications. React eCommerce templates for building eCommerce apps are a combination of several...

    What is React Yarn? How to Install It?

    Introduction to React Yarn The technical community shares hundreds and thousands of pieces of code every day in the community of JavaScript. As a result,...

    React Editor: Features, Installation and Limitations

    Why do we need the react editor?  There is a large range of code-based editors like CodeMirror, Monaco, Ace, etc., that provide us with the...

    React Babel: Everything You Need to Know About It

    Introduction About React Babel: React Babel is a very well known and well-implemented open-source transcompiler of JavaScript. We use it mainly to convert the ECMA...

    React Websocket: Usage, Installation and much more

    Introduction About React Websocket:  If you want to create a long-running connection between a client and a server then use React Websocket. Let's take an...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    Stay on op - Ge the daily news in your inbox