.panel
    .panel_inner
        %h2 Laser Eye Surgery
        %p Innovative vision correction
    .panel_reveal
        %h2 Laser Eye Surgery
        %p Innovative vision correction

@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
.panel{
    font-family: 'Slabo 27px', serif;
    background:whitesmoke;
    width:500px;
    padding:30px 0px;
    position:absolute;
    border-radius:6px;
    left:0;
    right:0;
    margin:auto;
    top:50%;
    transform:translateY(-50%);
    font-size:30px;
    user-select:none;
    cursor:pointer;
    height:125px;
    h2{
        position:relative;
        top:50px;
        margin:0;
    }
    p{
        position:relative;
        top:50px;
        font-size:20px;
        opacity:0.75;
        margin:0;
    }
    &_inner{
        -webkit-filter:blur(10px);
            height: 100%;
    top: 0;
        width: 100%;
    text-align: Center;
    position: absolute;

    }
    &_reveal{
            height: 100%;
    top: 0;
    text-align: Center;
    background: #f5f5f5;
            position: absolute;
    width: 100%;
         -webkit-mask:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mask.png")  -130px -130px/50px 50px no-repeat;	
    }
}

$('.panel').mousemove(function(event){
    var size = 180;
    console.log(size)
    var xDifference = ($(window).width() - $('.panel').width())/2 + (size/2);
    var x = event.clientX - xDifference;
    var yDifference = ($(window).height() - $('.panel').height())/2 + (size/2);
    var y = event.clientY - yDifference;
    $('.panel_reveal').css('-webkit-mask','url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mask.png")  ' + x + 'px ' + y + 'px/' + size + 'px ' + size + 'px no-repeat');
    $('.panel_reveal').css('mask','url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mask.png")  ' + x + 'px ' + y + 'px/' + size + 'px ' + size + 'px no-repeat');
    
})

$('.panel').mouseout(function(){
    $('.panel_reveal').css('-webkit-mask','url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mask.png")  -130px -130px/50px 50px no-repeat');
    $('.panel_reveal').css('mask','url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mask.png")  -130px -130px/50px 50px no-repeat');
})