Simple zoom effect with mouse hover with HTML, CSS and JS

Preview

HTML

<div class="gallery-placeholder">
    <div class="fotorama__stage__frame fotorama__active">
        <img class="fotorama__img" src="<?php echo 'https://kansagra/jaydip/jaydip.jpg'; ?>" >
    </div>
</div>
<div class="gallery-popup fixed-full-popup-model">
    <div class="gallery-zoom-img">
        <div class="gallery-main-img" style=""></div>
    </div>
</div>

CSS

<style>
.gallery-popup {
    cursor: url(../images/zoom-out.svg),pointer;
}
body .gallery-placeholder .fotorama__stage__frame.fotorama__active .fotorama__img {
    cursor: url(../images/zoom-in.svg),pointer;
}
.gallery-popup .gallery-zoom-img .gallery-main-img {
    width: 100%;
    height: 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.fixed-full-popup-model {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 21;
    background: #FFF;
    width: 100%;
    height: 100%;
    display: none;
}
</style>

JS

<script type="text/javascript">
$(document).ready(function(){
$('body .gallery-placeholder').on('click', '.fotorama__stage__frame.fotorama__active .fotorama__img',function(){
var $this = $(this);
var img = $this.attr('src');
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "url(" + img + ")")
$(".gallery-popup").fadeIn();
$("body").css("overflow", "hidden");
});
$(".gallery-popup").on("mousemove",".gallery-main-img",function(e){
var pixelToMove=100;
var height=$(this).innerHeight();
var newValueY=(e.clientY / height)*pixelToMove;
$(this).css('background-position',0+' '+newValueY+'%');
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
    $(".gallery-popup").fadeOut();
    $("body").css("overflow-y", "inherit");
}
});
$(".gallery-popup .gallery-main-img").click(function(){
$(".gallery-popup").fadeOut();
$("body").css("overflow-y", "inherit");
$('.gallery-popup .gallery-zoom-img .gallery-main-img').css("background-image", "");
});
});
</script> 

Product image Still zoom if I remove mouse cursor from image in magento 2

You need to replace the code of lib/web/magnifier/magnifier.js in your theme as below.

Find

$(document).on('mousemove', onMousemove);
_init($box, gOptions);

Replace

$box.on('mousemove', onMousemove);
       
/*Code By Jaydip*/
$box.on('mouseleave', mouseleave);
    function mouseleave(e) {
         onThumbLeave();
         isOverThumb = false;
         $magnifierPreview.addClass(MagnifyCls.magnifyHidden);
    }
/*Code By Jaydip*/
       
 _init($box, customUserOptions);