JSFiddle - React, Tailwind, and code Playground

by modaloda

HTML

<span class="komal dhiraj">
    <img width="300px" height="auto" src="http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.png" style="top: 0px" /></span>

CSS

.komal {
    border-radius: 5px 5px 5px 5px;
    float: left;
    height: 80px;
    margin-left: 3px;
    overflow: hidden;
    position: relative;
    width: 300px;
    border:5px solid #DDD;
}
img {
    position: absolute;
    transition: all 0.2s ease 0s;
}


 .komal:hover >img
 {  
 -moz-animation: border-bounce 3000ms linear;
 -webkit-animation: border-bounce 3000ms linear;
 }
 @-moz-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }
 @-webkit-keyframes border-bounce {
 0%   { margin-top: -10px;  }
 25%  { margin-top: -50px; }
 50%  { margin-top: -100px;  }
 75%  { margin-top: -50px;  }
 100% { margin-top: -0px;  }
 }

JavaScript

//$( document ).ready(function() {
//var xH
//$('.dhiraj').hover(
//function() {
//xH = $(this).children("img").css("height");
//xH = parseInt(xH);
//xH = xH - 150;
//xH = "-" + xH + "px";
//$(this).children( "img" ).css("top",xH);
//}, function() {
//$(this).children( "img" ).css("top","0px");
//}
//);
//});