JSFiddle - React, Tailwind, and code Playground

HTML

<div id="links">
	<div align="center" class="rollover"><a href="https://www.google.de"></a></div>
	<hover><a href="https://www.google.de" target="_blank">Test Hyperlink</a></hover>
</div>

CSS

.rollover a {  display:block; 
    width:100px; 
    height:100px; 
    background-image:url('https://image.jimcdn.com/app/cms/image/transf/dimension=300x10000:format=jpg/path/s4c7f66100d621376/image/ia691c98b2a081593/version/1282996479/image.jpg'); }

.rollover a:hover { display:block; 
     width:100px; 
     height:100px; 
     background-image:url('https://image.jimcdn.com/app/cms/image/transf/dimension=300x10000:format=jpg/path/s4c7f66100d621376/image/i4f44d23312b4df1d/version/1282996468/image.jpg');}
     
hover {
	text-decoration: none;
	position: relative;
	color: #5a768a;
}

hover:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0%;
	border-bottom: 2px solid #5a768a;
	transition: 0.4s;
	color: #5a768a;
}

hover:hover:after {
	width: 100%;
	color: #5a768a;
}