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

@keyframes soc_link_animation {
	0% {
		position: absolute;
		bottom: 0;
	}
	25% {
		bottom: -20px;
	}
	40%{
		bottom: -25px;
	}
	50% {
		bottom: -30px;
	}
	60%{
		bottom: -35px;
	}
	75% {
		bottom: -40px;
	}
	100% {
		bottom: initial;
		opacity: 1;
	}
}
div{
  width: 100px;
  height: 50px;
  overflow: hidden;
  position: relative;

}
div img{
  bottom: 0;
  position: absolute;

}
div img:hover{
	animation: soc_link_animation 1s linear;
	animation-fill-mode: forwards;
}