Reveal part of image with blurry/gradient edge on hover

Question

I'm trying to achieve this effect.

I used the pen by Nikolay Talanov for the reveal effect, I've tried to make the edges of the revealing circle blurry using box shadow to make it look closer to the wanted effect but is not quite similar.

Anyone has another solution or approach to make it look the same?

https://codepen.io/dlarkiddo/pen/RxMaVv

<div class="background">
    <div class="reveal"></div>
</div>

Css

   html, body {
       font-size: 62.5%;
       height: 100%;
       overflow: hidden;
   }

  .background {
      position: relative;
      height: 100%;
      background: #000000;
      padding: 20rem;
      text-align: center;
      background: url("http://www.wallpapers4u.org/wp-content/uploads/paper_patterns_backgrounds_textures_lines_36212_1920x1080.jpg") 50% 50% no-repeat fixed;
  }

  .reveal {
      z-index: 5;
      position: absolute;
      top: calc(50% - 10rem);
      left: calc(50% - 10rem);
      width: 20rem;
      height: 20rem;
      background: url("http://gallery.hd.org/_exhibits/textures/text-sample-of-old-novel-DHD.jpg") 50% 50% no-repeat 

  fixed;
      background-size: cover;
      border-radius: 100%;
      box-shadow: 0 0 9em 10em #ffffff inset,0 0 9em 10em #ffffff;
  }

Js

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

Answer 1

You img url was incorrect. But anyway, what you need to do is apply a mask.

For instance:

.reveal {
  z-index: 5;
  position: absolute;
  top: calc(50% - 10rem);
  left: calc(50% - 10rem);
  width: 20rem;
  height: 20rem;
  background: url("http://i.imgur.com/Im9luhE.png") 50% 50% no-repeat fixed;
  background-size: cover;
  border-radius: 50%;
  -webkit-mask-image: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 36%, rgba(255,255,255,0) 70%);
}

https://codepen.io/facundocorradini/pen/jYzMOe

Adjust the gradient as needed.

Downside is, that mask syntax is webkit-only, and like, totally deprecated. For current syntax use the current declaration of mask and use a SVG. Hope that guides you enough, I'd do it with SVG but already spend too much time in this (great!) challenge.

Cheers!

Answer 2

I would propably use clip-path for this to show only part of the background and for the reveal element I use a radial-gradient to create the shadow effect.

This can also work with content and not only background image.

Here is an example:

$(document).ready(function() {
  var $reveal = $(".reveal"),
    revealWHalf = $reveal.width() / 2;
  $(document).on("mousemove", function(e) {
    $reveal.css({
      "left": e.pageX,
      "top": e.pageY
    });
    $('.background').css('clip-path', 'circle(80px at ' + e.pageX + 'px ' + e.pageY + 'px)');
  });
});

html,
body {
  margin: 0;
  padding-top: 1px;
  overflow: hidden;
  background: url(https://lorempixel.com/1000/800/)
}

.background {
  position: relative;
  height: 100vh;
  color: #fff;
  text-align: center;
  padding-top: 1px;
  background: url("https://lorempixel.com/1000/1000/");
  clip-path: circle(80px at 50px 50px);
  -webkit-clip-path: circle(80px at 50px 50px);
}

.reveal {
  z-index: 5;
  position: absolute;
  top: 50px;
  left: 50px;
  transform: translate(-50%, -50%);
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background-image: radial-gradient(circle at center, transparent 20%, #fff 70%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
  <h1>I am a title</h1>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
  <div class="reveal"></div>
</div>