Focus Effect

Unblur image.

by the_voder

HTML

<!-- Container element for magnifier and blurred image -->
<div id="container">
	
	<!-- Blurred image -->	
	<img src="https://media.architecturaldigest.com/photos/57213ea1741fcddb16b563a9/master/pass/Tavormina-seizing-beauty_02.jpg" alt="">
	
	<!-- Magnifying glass element -->
	<div id="magnifier"></div>
</div>

CSS

#container {
/* Must set position property of container in order to position children relative to it */
  position: relative;
  width: 80vw;
  padding: 0;
  overflow: hidden;
}

#container img {
  width: 100%;
  height: auto;
	/* CSS blur filter */  
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

#magnifier {
	position: absolute;
	width: 15%;
	/* This little trick used to make the element square despite having no content */
	padding-top: 15%;
	/* border-radius 50% makes element into circle */
	border-radius: 50%;
	border: white 2px solid;
	/* Same image as blurred */
	background-image: url("https://media.architecturaldigest.com/photos/57213ea1741fcddb16b563a9/master/pass/Tavormina-seizing-beauty_02.jpg");
	/* Use 'vw' (viewport-width) unit to ensure bg image same size as blurred image beneath it */
	background-size: 80vw auto;
}

JavaScript

$(document).ready(function() {

  // Container element (so we don't have to select it multiple times)
  const $imgcontainer = $("#container")
  // Magnifying-glass element (as above)
  const $magnifier = $("#magnifier");

  // Bind to mouse-move event on container
  $imgcontainer.mousemove(function(event) {

    // Get position of mouse relative to element
	// https://www.tutorialrepublic.com/faq/how-to-find-mouse-position-relative-to-an-element-using-jquery.php
    var relX = event.pageX - $(this).offset().left;
    var relY = event.pageY - $(this).offset().top;
    
	// Half width of magnifier element
    var offsetX = $magnifier.width() / 2;

    // Center magnifier element by subtracting half magnifer width
    relX -= offsetX;
    relY -= offsetX;

    // Position magnifier element
    $magnifier.css({
      left: relX,
      top: relY
    });

    // Offset magnifier background-position using negative of relative position
    $magnifier.css({
      "background-position-x": -relX,
      "background-position-y": -relY
    });

  }); // End mousemove()

}); // End $(document).ready()