Make Water Ripple Effect use CSS and jQuery

Semenjak era gadget booming, beberapa (OS) telah dapat dioperasikan melalui iPad, iPhone, smartphone, tablet dll! Dengan begitu semakin kencang laju para developer dari berbagai sektor mengembangkan aplikasi, code, script dsb untuk perangkat² tersebut. Tak ayal dari dunia CSS & HTML pun ikut lahir trik dan tips keren² punya yang tidak boleh terlewatkan :D
Ada satu trik efek yg sedang ngetrend di kalangan gadgeter's yaitu water effect, ada juga yg bilang click effect, water ripples atau apapun namanya. Efek memunculkan riak air (water ripple effect) ketika terjadi sentuhan² pada objek!

Sobat dapat membaca beberapa resources pilihan AA seperti berikut:

• Android L Ripple Effect.
>> codepen.io/idiotWu/pen/nefhC
• Material design morphing icons 2.
>> codepen.io/albebonv/pen/gIlrw
• Recreating the Touch Ripple Effect as Seen on Google Design.
>> webdesign.tutsplus.com/tutorials/recreating-the-animated-circle-effect-as-seen-on-google-design--cms-21655
• Water ripple FX with Canvas and Javascript.
>> code.almeros.com/water-ripple-canvas-and-javascript

Berawal dari sanalah tercipta water ripple effect dengan komposisi small code + jQuery :P

DEMO & CODE

.ripple {
width:450px;
overflow:hidden;
display:inline-block;
transform:translateZ(0);
transition:all 0.5s ease;
box-shadow:0 0 5px rgba(0,0,0,0.2);
}
.ripple:hover {
box-shadow:0 0 10px rgba(0,0,0,0.4);
}
.ripple:focus {
outline:0;
border:none;
}
.ripple_effect {
width:100%;
height:100%;
position:absolute;
border-radius:100%;
transform:scale(0);
pointer-events:none;
background:rgba(0,0,0,0.2);
}
.ripple_effect.animate {
animation:ripple_effect 1s ease-out;
}
@keyframes ripple_effect {
100% {
opacity:0;
transform:scale(2.5);
}
}

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $(".ripple").click(function(event){
  if($(this).find("b.ripple_effect").length == 0) { $(this).prepend("<b class='ripple_effect'></b>"); }
  ripple_effect = $(this).find("b.ripple_effect").removeClass("animate");
  x = event.pageX - ripple_effect.width()/2 - $(this).offset().left;
  y = event.pageY - ripple_effect.height()/2 - $(this).offset().top;
  ripple_effect.css({top: y+'px', left: x+'px'}).addClass("animate");
 })
});
//]]>
</script>

Planning HTML<div class="ripple">
<img src="LINK-IMAGE" />
</div>

codepen.io/beben-koben/full/ceuft

Happy ripple \m/