JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
	<div class="inside">
		
		<ul>
			<li id="ourapps-1"><a href="#">
				<div class="background" id="app1"></div>
				<div class="slide-up-text"><h2>Quack!</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
				
			</a></li>
			
			<li id="ourapps-2"><a href="#">
				<div class="background" id="app2"></div>
				<div class="slide-up-text"><h2>Towerr</h2>Elit dolor ut labore tempor adipisicing adipisicing adipisicing magna amet dolore do amet elit aliqua elit. </div>
			</a></li>
			
			<li id="ourapps-3"><a href="#">
				<div class="background" id="app3"></div>
				<div class="slide-up-text"><h2>Transit</h2>Eiusmod amet dolor dolore lorem consectetur sit et elit tempor magna ut sed magna sed sit adipisicing lorem dolor ut ut. </div>
			</a></li>
		</ul>
		
	</div>	
</div>
	
</body>

CSS

#main{
	width:100%;
	height:300px;
	padding: 50px 0;
	background:#313334;
	
}
#main ul {margin:0;padding:0; width:100%; height:100%;
}
#main li {
	width:297px;
	height:297px;
	display:block;
	margin:0 5px;
	float:left;
	border-radius:999px;
	overflow: hidden; 
	border:3px solid #1d90fc;
	background:#1d90fc;
	position: relative;
	z-index: 3;
    -webkit-transition: 0.9s;
}
#main li:hover{border:3px solid white;}

.background{
	position: absolute;
	z-index: 1;
	width:100%;
	height:100%;
	border-radius: 999px;
	overflow: hidden; !important
	-webkit-transition:0.3s ease;
}
#main li:hover .background{-webkit-transform:rotate(-30deg);}

#app1{background:#1d90fc url("img/app1.png") no-repeat;}
#app2{background:#1d90fc url("img/app2.png") no-repeat;}
#app3{background:#1d90fc url("img/app3.png") no-repeat;}

.slide-up-text{
position: absolute;
z-index: 2;
bottom:-500px;
	width:80%;
	height:80%;
	padding:10%;
	background:rgba(0,0,0,0.83);
	text-align: center;
	border-radius: 999px;
	-webkit-transition: 1s ease;
	
	
}

#main li:hover .slide-up-text{
	position: absolute;
	bottom:-30px;
	margin:0;
	-webkit-transition: 0.5s;
	-webkit-transition-delay: 0.2s;
}