JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<div>
  <img src="https://htmlburger.com//css/images/burgers/burger-html.png" alt="">
</div>
<div>
  <img src="https://htmlburger.com//css/images/burgers/burger-html.png" alt="">
</div>
<div>
  <img src="https://htmlburger.com//css/images/burgers/burger-html.png" alt="">
</div>

CSS

div {
  position:relative;
  float:left;
  width:100px;
  height:100px;
  margin:20px;
  outline:1px solid grey;
}
div img {
  position:absolute;
  left:50%;
  bottom:0;
  width:80px;
  height:76px;
  margin-left:-40px;
}

JavaScript

$('div').each(function() {
	var t = $(this).find('img');
  t.on('mouseenter', function() {
    t.stop().animate({
      'height': 60
    }, 500, 'easeOutCubic')
  });
  t.on('mouseleave', function() {
    t.stop().animate({
      'height': 100,
      'bottom': 10
    }, 300, 'easeInCubic', function() {
      t.animate({
				'height': 76,
      	'bottom': 0
      }, 200, 'easeInOutCubic');
    });
  });
});