Drop effect on hover front page

	
====== js ======
	//Drop effect on hover front page
			var ink, d, x, y;
			$(".holder").mouseenter(function(e){
				if($(this).find(".drop-let").length === 0){
					$(this).prepend("<span class='drop-let'></span>");
				}

				ink = $(this).find(".drop-let");
				ink.removeClass("splash");

				if(!ink.height() && !ink.width()){
					d = Math.max($(this).outerWidth(), $(this).outerHeight());
					ink.css({height: d, width: d});
				}

				x = e.pageX - $(this).offset().left - ink.width()/2;
				y = e.pageY - $(this).offset().top - ink.height()/2;

				ink.css({top: y+'px', left: x+'px'}).addClass("splash");
			});
			
			
	===========	css ========
@include keyframes(ripple) {
	100% {
		opacity: 0;
		@include transform(scale(2.5));
	}
}
.splash {
    -webkit-animation: ripple 0.65s linear;
    -moz-animation: ripple 0.65s linear;
    animation: ripple 0.65s linear;
}
.drop-let {
    display: block;
    position: absolute;
    background: rgba(255,255,255,0.3);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}