title: Creating masked overlay spotlight effect to reveal image
body: <p>I am trying to create an awesome "reveal" effect on my portfolio page.</p>
  
  <p>Here is an example of what I am trying to visually accomplish with JS and CSS. My example was made using Photoshop. </p>
  
  <p><a href="https://i.stack.imgur.com/p7Ac9.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p7Ac9.gif" alt="enter image description here"></a></p>
  
  <p><strong>Here is a</strong> <strong><a href="https://jsfiddle.net/ga2D2/109/" rel="nofollow noreferrer">JS FIDDLE</a></strong> I found and modified where I get sort of close.. But the spot light is too "hard" and not nearly as elegant as what I had in mind. I want it to feel more like a "glow" instead of a circle.</p>
  
  <p>Does anyone know how to fix it? Any help would be much appreciated. I am open to any suggestions for achieving the effect.</p>
  
  <pre><code>// Create the spotlight
  function createSpotlight() {
      $('.spotlight').width(spotlightDiameter + 'px')
                     .height(spotlightDiameter + 'px');
  
      for (var i = 0; i &lt; numSpotlightLayers; i++) {
          var layerDiameter = spotlightDiameter + (i * spotlightLayerThickness * 2);
          var opacity = 1 - (i / numSpotlightLayers);
  
          $('.spotlight').append('&lt;div class="layer' + i + '"&gt;&lt;/div&gt;');
  
          $('.spotlight .layer' + i)
                  .width(layerDiameter + 'px')
                  .height(layerDiameter + 'px')
                  .css({borderRadius: (layerDiameter &gt;&gt; 1) + 'px',
                        opacity: opacity,
                        zIndex: (numSpotlightLayers - i)});
      }
  }
  </code></pre>