Reveal Part Of Background Image Using jQuery and CSS

A scope/spotlight effect made with jQuery and CSS that allows you to reveal part of fix positioned background image using jQuery mousemove() function.

How to use it:

1. Create an empty element for the scope effect.

<div class="scope"></div>

2. The CSS to style the scope effect and add the background image to your web page.

.scope {
  z-index: 5;
  position: absolute;
  top: calc(50% - 10rem);
  left: calc(50% - 10rem);
  width: 20rem;
  height: 20rem;
  background: url("1.jpg") 50% 50% no-repeat fixed;
  border-radius: 50%;
}

3. Load the needed jQuery JavaScript library at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

4. The core JavaScript to reveal part of the background image on mouse move.

$(document).ready(function() {
  var $magic = $(".magic"),
      magicWHalf = $magic.width() / 2;
  $(document).on("mousemove", function(e) {
    $magic.css({"left": e.pageX - magicWHalf, "top": e.pageY - magicWHalf});
  });
});

---

This awesome jQuery plugin is developed by suez. For more Advanced Usages, please check the demo page or visit the official website.