Edit on

<div class="container">
  <div class="bg_circle"></div><!--bg circle-->   
  
  <div class="circle"></div> <!--inner circle-->

</div>
<div class="cor"></div>
<div class="c_h"></div>
<div class="c_w"></div>
<div class="b_h"></div>
<div class="b_w"></div>
*{margin:0;padding:0;}
body {
  background:url("http://www.hdpaperz.com/wallpaper/original/Creative-Wallpaper-Boat-in-a-Bottle-Wallpaper-HD-Wallpapers.jpg");  
}
.container {
  width:400px;
  margin:50px auto;
  text-align:center;
  position:relative;
  top:250px;
  left:100px;
}
.bg_circle, .circle {
  width:200px;
  height:200px;  
  border-radius:100%;
  position:absolute;
}
.bg_circle {
  background:rgba(0,128,255,.45);
 /* background:#0080FF;
  opacity:.1;*/
  transition:all 2s ease-in;
}

.circle {
  background:#0080FF;
  opacity:.6;  
  transition:all .5s ease-in;
  box-shadow:inset 0 0 8px rgba(170,0,237,.2);
}
.effect {
   transition:all .5s ease-in;
  -webkit-animation:circle .4s ease-in-out alternate;  
}
.r_effect {
  transition:all .5s ease-in;
  -webkit-animation:r_circle .3s ease-in-out reverse;  
}
.b_effect {
   transition:all .5s ease-in;
  -webkit-animation:bg_circle .9s ease-in-out forwards; 
}
.br_effect {
  transition:all .5s ease-in;
  -webkit-animation:bgr_circle .8s ease-in-out forwards;  
}
@-webkit-keyframes circle {
  0% {   
    -webkit-transform:scale(1);    
  }
  40% {
    -webkit-transform:scale(.85);    
  }
    60% {
    -webkit-transform:scale(1);    
  }
    80% {
    -webkit-transform:scale(.98);    
  }
  100% {
    -webkit-transform:scale(1);  
  }
}
@-webkit-keyframes r_circle {
  0% {   
    -webkit-transform:scale(1);   
    
  }
  50% {    
     -webkit-transform:scale(.9);   
    
  }
  100% {    
    -webkit-transform:scale(1);     
  }
}
@-webkit-keyframes bg_circle {
  0% {   
    -webkit-transform:scale(1);  opacity:.3;  
  }
  30% {   
    -webkit-transform:scale(1.1);  opacity:.3;  
  }
  
  100% {
    -webkit-transform:scale(1.3);  opacity:0; 
  }
}
@-webkit-keyframes bgr_circle {
   0% {   
    -webkit-transform:scale(1);  opacity:.5;  
  }
  
  100% {
    -webkit-transform:scale(1.2);  opacity:0; 
  }
}
$(document).ready(function() {
  
    $(".circle").mouseleave(function() {                        $(".circle").removeClass("effect").addClass('r_effect');
    $(".bg_circle").removeClass("b_effect").addClass('br_effect');
    }).mouseover(function() {        $(".circle").removeClass("r_effect").addClass('effect');
    $(".bg_circle").removeClass("br_effect").addClass('b_effect');
    });
  
   
    
  
    $(".container").mousemove(function(e) {
       var mX, mY, distance,
        $distance = $('.c_w'),
        $element  = $('.circle');

        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance($element, mX, mY);
        $distance.text(distance);         
       
          
      
    });
  function calculateDistance(elem, mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
    }
    
  
});
Rerun