JSFiddle - React, Tailwind, and code Playground

by karthick Chandran

HTML

<div class="ripple">
  <div class="inner">
      <img src="http://dougleschan.com/the-recruitment-guru/wp-content/uploads/2014/06/funny-cat1.jpg"/>
  </div>
</div>

CSS

.ripple {
  position: fixed;
  background: #E91E63;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  overflow: hidden;
  transition: all 3000ms ease, margin-top 2000ms ease,margin-left 3000ms ease;
  left: 50%;
  top: 50%;
}
.ripple.expanded {
  width: 4000px;
  height: 4000px;
  margin-left: -2000px;
  margin-top: -2000px;
}
.ripple .inner {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
  transition: margin-top 10ms ease;
}

JavaScript

$(".ripple").click(function() {
  
  $(this).addClass("expanded");
  $(this).find(".inner").css({
    width: $(window).width(),
    height: $(window).height() ,
    "margin-left": -$(window).width() / 2,
    "margin-top": -$(window).height() / 2
  })

});

$(".ripple").on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
console.log('end');
});