CSS Searchlight

Nice searchlight effect using CSS and a few lines of JavaScript.

HTML

<div class="canvas"></div>
<div class="searchlight"></div>

CSS

html {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.canvas {
  width: 100%;
  height: 100%;
  background: url("https://unsplash.it/2048/2048?random") no-repeat center;
  background-size: cover;
}

.searchlight {
  position: absolute;
  z-index: 100;
  height: 300px;
  width: 300px;
  border-width: 100vh 100vw;
  border-style: solid;
  border-color: #000;
  top: -100vh;
  left: -100vw;
  cursor: none;
  background: #000;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -ms-box-sizing: content-box;
  box-sizing: content-box;
}

.searchlight.on {
  background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
  /* FF3.6+ */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
  /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
  /* IE10+ */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 100%);
  /* W3C */
}

JavaScript

$('.searchlight')
  .on('mousemove', function(event) {
    $(this).addClass('on').css({
      'margin-left': event.pageX - 150,
      'margin-top': event.pageY - 150
    });
  })
  .on('mouseout', function(event) {
    $(this).removeClass('on');
  })
  .on('click', function() {
    $(this).fadeOut(function() {
      $(this).remove();
    });
  });