Display popup image next to mouse

Question

On my website I'm trying to create a popup of an hovered image so that when the user moves his mouse on the image, the image should appear in a popup in its original size size next to the mouse... something like the HooverZoom+ plugin for browsers...

Now my code kinda almost works... it shows the image in an popup but it centers it in the middle of the screen... how would could I make it so it shows it on the left or the right side of the mouse?

Im also usign Bootstrap for layout of the images

Here is my code and JSFiddle:

HTML:

<div id="page-content-wrapper">
    <div class="container dodatki pb-5">
        <div class="row text-center">
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Poševni vrh omare">

                <p class="dodatki-desc">Poševni vrh omare</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Kovinski podstavek omare">

                <p class="dodatki-desc">Kovinski podstavek omare</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Sedežni podstavek omare">

                <p class="dodatki-desc">Sedežni podstavek</p>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Kovinski podstavek brez nogice">

                <p class="dodatki-desc">Kovinski podstavek brez nogice</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Kovinski podstavek z nastavljivo nogico">

                <p class="dodatki-desc">Kovinski podstavek z regulirno nogico</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Viseča pregradna stena">

                <p class="dodatki-desc">Viseča pregradna stena</p>
            </div>
        </div>
        <div class="row text-center">
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="PVC etiketni okvir">

                <p class="dodatki-desc">PVC etiketni okvir</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="Obesna kljukica za v omaro">

                <p class="dodatki-desc">Obesna kljukica</p>
            </div>
            <div class="col-12 col-md-4 col-lg-4 popup"><img src="https://www.urbanconcepts.ph/wp/wp-content/uploads/2016/07/BR7130-watson-wardrobe-whitebg.jpg" class="img-fluid fr-fic fr-dii" alt="PVC pladenj za čevlje">

                <p class="dodatki-desc">PVC pladenj za čevlje</p>
            </div>
        </div>
    </div>
</div>

SCSS:

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
    height: 100%;
}

body {
    margin: 0;
    font-size: 16px;
    line-height: 1.428571429;
    padding: 0;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
}
.dodatki {
    img {
        height: 10rem;
        transition: all .2s ease-in-out;
        &:hover {
            transform: scale(1.4);
        }
    }
    .dodatki-desc {
        margin-top: 16px;
        margin-bottom: 10px;
        font-size: 0.8125rem;
        color: #666666;
    }
}
.show {
    z-index: 999;
    display: none;
    .img-show {
        width: 650px;
        height: 650px;
        background: #FFF;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        overflow: hidden;
        -webkit-box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
        box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
        img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

JS:

$(document).ready(function() {

    "use strict";

    $(".popup img").mouseover(function () {
        var $src = $(this).attr("src");
        $(".show").fadeIn();
        $(".img-show img").attr("src", $src);
    });

    $(".popup, .img-show").mouseleave(function () {
        $(".show").fadeOut();
    });
});

JS Fiddle

Thanks for your help in advance

Answer 1

For displaying images next to cursor you can use this one jQuery method

$(document).mousemove();

Example:

$(document).mousemove(function(e) {
    $('.logo').offset({
        left: e.pageX,
        top: e.pageY + 20
    });
});

See this fiddle for the working one https://jsfiddle.net/q1xc7vbg/

Cheers

Answer 2

For hover-zoom take a look here.

I hope i got you right now. When the mouse hovers the image (mouseover-event), you have to create and append a new element containing the image to the body. This should not be positioned over the original image in order to not trigger the mouseleave event immediately. Later on, when the user moves his mouse out of the small image, you can delete/remove the created element when the mouseleave-event triggers.

I would recommend to use an absolute positioning on the big-image element.