JSFiddle - React, Tailwind, and code Playground

HTML

<div id="teams">

<ul>
	<a href=""><li class="back"></li></a>
	<a href=""><li class="back"></li></a>
	<a href=""><li class="back"></li></a>
</ul>

</div>

CSS

#teams{
		width:100%;
	}
	
	#teams ul{
		overflow:auto;
	}
	
	#teams li{
		list-style:none;
		display:inline-block;
		width: 31%;
		min-height: 700px;
		height: auto;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	
	li.back{background-image:url("https://f4.bcbits.com/img/a3503173982_16.jpg");}
	li.back:hover{background-image:url("https://designschool.canva.com/wp-content/uploads/sites/2/2015/10/How-To-Use-Blurred-Images-In-Your-Designs-To-Great-Effect_Thumbnail_01.png");}