Transparent overlay on mouse hover (blurred image)

HTML

<header>
  <h1>How's about this!</h1>
</header>
<div class="top-hero">

  <div class="background-image background-cover" ></div>

  <div class="circle">

    <div class="inside blur-big background-cover"></div>
    <div class="inside blur-small background-cover"></div>  
    <div class="inside clear background-cover"></div> 

  </div>

</div>

CSS

header {
  background: #222;
}
header h1 {
  color: #fff;
}
.top-hero {
  position: relative;
  margin: 20px;
  width: 100%;
  height: 100px;
}

.background-cover {
  background: no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.background-image {
  position: absolute;
  top:0; left: 0;
  width: 100%;
  height: 100%;

  background-image: url(http://www.palisadenews.com/wp-content/uploads/2016/04/hobbies.png);
  /*-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  filter: blur(10px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');*/
}

.circle {
  position:absolute;
  top:-999px; left:-999px; /* start out of view */
  border-radius:50%;
  width: 230px;
  height: 230px;
  box-sizing: border-box;
}

.circle .inside {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  background-image: url(http://i.imgur.com/OaE8VAj.jpg);
}

.blur-big {
  height: 100%;
  width: 100%;
  
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  filter: blur(3px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
/* positioned slightly 'inside' the big blur */
.blur-small {
  margin: 5px;
  height: 220px; width: 220px;
  
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');
}
.clear {
  margin: 10px;
  height: 210px; width: 210px;
}

JavaScript

/* Why use native JS while jQuery is much easier, you ask? It's much faster, that's why. :) I first created it in jQuery, but Internet Explorer was lagging majorly. And I liked the test of my native JS-skills */

//check if it's a mobile device
if( 'ontouchstart' in window ) {

} else 
    addTopHeroMouseMoveFunctionality(); //just add this functionality when it'll be used


function addTopHeroMouseMoveFunctionality() {

    //do as little as possible in the mousemove-event, so initiate variables here
    var circle = getElByClass('circle'),
        topHero = getElByClass('top-hero');

    //add event listener for the mouse enters the image, show circle
    topHero.addEventListener("mousemove", moveCircle);

    //add the same event listener to the header to allow mouse over the header without the circle disappearing. No need for a mouse-out because the mouse needs to travel over 'topHero' before leaving
    getElByClass('site-header').addEventListener("mousemove", moveCircle);

    //add event listener for when the mouse leaves the image, hide circle
    topHero.addEventListener("mouseout", function(e) {

        //give the circle a position outside the viewport
        circle.style.top = '-999px';
        circle.style.left = '-999px';
        
    });

    function moveCircle(e) {

        //get the offset from the top to avoid the circle going all over the place when scrolling down or horizontally
        var doc = document.documentElement,
            left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
            top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

        //give the circle a position near the mouse, position minus half of its width/height to center it
        circle.style.top = top + e.clientY - (circle.offsetHeight / 2) + 'px';
        circle.style.left = left + e.clientX - (circle.offsetWidth / 2) + 'px';
          
    }
}

//shorthand to get the element by classname
function getElByClass( className )...