Magnifying glass effect with Elementor

				
					.magnify{ border-radius: 50%; border: 2px solid black; position: absolute; z-index: 20; background-repeat: no-repeat; background-color: white; box-shadow: inset 0 0 20px rgba(0,0,0,.5); display: none; cursor: none; }
				
			
				
					<script>
	var $m = jQuery;
$m(document).ready(function() {
var magnifierSize = 250;
var magnification = 4;
function magnifier() {
  this.magnifyImg = function(ptr, magnification, magnifierSize) {
    var $pointer;
    if (typeof ptr == "string") {
      $pointer = $m(ptr);
    } else if (typeof ptr == "object") {
      $pointer = ptr;
    }
    if(!($pointer.is('img'))){
      alert('Object must be image.');
      return false;
    }
    magnification = +(magnification);
    $pointer.hover(function() {
      $m(this).css('cursor', 'none');
      $m('.magnify').show();
      var width = $m(this).width();
      var height = $m(this).height();
      var src = $m(this).attr('src');
      var imagePos = $m(this).offset();
      var image = $m(this);

      if (magnifierSize == undefined) {
        magnifierSize = '150px';
      }
      $m('.magnify').css({
        'background-size': width * magnification + 'px ' + height * magnification + "px",
        'background-image': 'url("' + src + '")',
        'width': magnifierSize,
        'height': magnifierSize
      });
      var magnifyOffset = +($m('.magnify').width() / 2);
      var rightSide = +(imagePos.left + $m(this).width());
      var bottomSide = +(imagePos.top + $m(this).height());
      $m(document).mousemove(function(e) {
        if (e.pageX < +(imagePos.left - magnifyOffset / 6) || e.pageX > +(rightSide + magnifyOffset / 6) || e.pageY < +(imagePos.top - magnifyOffset / 6) || e.pageY > +(bottomSide + magnifyOffset / 6)) {
          $m('.magnify').hide();
          $m(document).unbind('mousemove');
        }
        var backgroundPos = "" - ((e.pageX - imagePos.left) * magnification - magnifyOffset) + "px " + -((e.pageY - imagePos.top) * magnification - magnifyOffset) + "px";
        $m('.magnify').css({
          'left': e.pageX - magnifyOffset,
          'top': e.pageY - magnifyOffset,
          'background-position': backgroundPos
        });
      });
    }, function() {

    });
  };
  this.init = function() {
    $m('body').prepend('<div class="magnify"></div>');
  }
  return this.init();
}
var magnify = new magnifier();
magnify.magnifyImg('img', magnification, magnifierSize);
});
</script>
				
			

If you need any plugin for this tutorial you can find it in the plugins page.

Share on your social networks

Leave a Comment

Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.