JSFiddle - React, Tailwind, and code Playground

HTML

<div><img src="https://www.livinlite.com/images/social-media-icons/Livin-Lite-YouTube-Icon-hover.svg" alt=""></div>

CSS

div{
  width: 100px;
  height: 50px;
  overflow: hidden;
  position: relative;
}
div img{
  bottom: 0;
  position: absolute;
  transition: all 0.8s ease-in-out;
}
div img:hover{
	transform: translateY(50px);
}