JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<body>
				<div class="mright" id="mright">
					
						<div class="icon1" id="allicon"><a  class="web1" id="web1"><span>Lorem ipsum dolor sit amet<img src="imgs/280x150web.jpg" alt="280x150" id"280x150">
						<p> Lorem ipsum dolor sit amet, consectetur <br>
						adipiscing elit.Suspendisse ac iaculis ante.</p></span></a></div>
					
					<div class="icon2" id="allicon"><a class="web2" id="web2"><span>Lorem ipsum dolor sit amet</span></a></div>
					<div class="icon3" id="allicon"><a class="web3"id="web3"><span>Lorem ipsum dolor sit amet</span></a></div>
			</div>                    </body>

CSS

#mright {
margin-left:auto;
margin-right:auto;
width:1024px;
}
#mright span{
	width:0;
	left:38px;
	padding:0;
	position:absolute;
	overflow:hidden;
	font-family:CODE;
	background-color:none;

	/* Text properties */
	font-size:18px;
	font-weight:bold;
	letter-spacing:0.6px;
	white-space:nowrap;
	line-height:50px;
	
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}
#mright a{
	height:100px;
	width:100px;
	display:block;
	position:absolute;
	border-radius:50%;
	box-shadow:1px 1px 2px rgba(0,0,0,0.5);
}
#mright a p{	
	display:block;
	max-width:400px;
	font-size:16px;
	margin-top:20px;
	line-height:30px;
	}
#mright a  img{
	display:block;
	margin-left:0;
}
/* General hover styles */

#mright .web1:hover{
	text-decoration:none;
	transform: translate(-100px,0) scale(1.25);
	-webkit-transition: all 0.50s ease-in-out;
	z-index:4;
}	
#mright .web2:hover{
	text-decoration:none;
	transform: translate(-100px,0) scale(1.25);
	-webkit-transition: all 0.50s ease-in-out;
	z-index:4;
}	
#mright .web3:hover{
	text-decoration:none;
	transform: translate(-100px,0) scale(1.25);
	-webkit-transition: all 0.50s ease-in-out;
	z-index:4;
}	
#mright a:hover span{ 
	display:block;
	margin:0;
	width:auto;
	padding:10px;
	overflow:hidden;
	background-color:#e6e6e6;
	position:absolute;
	left:105px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
	z-index:5;
	}
		.icon1,.icon2,.icon3,.icon4{
	height:100px;
	margin:2px;
	margin-left:25%;
	margin-bottom:20px;
	}
/* BUtton1*/
	.web1 {background-image:url(imgs/100web.png);}
	.web1:hover {background-image:url(imgs/100web2.png);}
	.web1 {display:block;}
	.web1 span{
	color:white;
	}
	
	
	/** ??????????????? */
	#mright .web1:hover .web2{
	margin-left:-250px;
	transform: translate(-250px,0) scale(1.25);
	-webkit-transition: all 0.50s ease-in-out;}