JSFiddle - React, Tailwind, and code Playground

HTML

<div class="screen">
							<div class="screen_inner">
								<div class="pic pic_03">
									<div class="color color_03" id="color_03"></div>
									
									<div class="text">dfghfhgfhfgh fh fg gfghgfj ghj ghj g ghjghjg g f fj  ffgfhgfhfh ff </div>	
								</div>
								
								<div class="pic pic_04">
									<div class="color color_04" id="color_04"></div>
									
									<div class="text">dfghfhgfhfgh fh fg gfghgfj ghj ghj g ghjghjg g f fj  ffgfhgfhfh ff </div>	
								</div>
								
								<div class="pic pic_05">
									<div class="color color_05" id="color_05"></div>
									
									<div class="text">dfghfhgfhfgh fh fg gfghgfj ghj ghj g ghjghjg g f fj  ffgfhgfhfh ff </div>								
								</div>
								
								<div class="pic pic_06">
									<div class="color color_06" id="color_06"></div>
									
									<div class="text">dfghfhgfhfgh fh fg gfghgfj ghj ghj g ghjghjg g f fj  ffgfhgfhfh ff </div>	
								
								<div class="pic pic_08">
									<div class="color color_08" id="color_08"></div>
									
									<div class="text">dfghfhgfhfgh fh fg gfghgfj ghj ghj g ghjghjg g f fj  ffgfhgfhfh ff </div>								
								</div>
								
								<div class="pic pic_09">
									<div class="color color_09" id="color_09"></div>
									
									<div class="text">dfghfhgfhfgh fh fg gfghgfj ghj ghj g ghjghjg g f fj  ffgfhgfhfh ff </div>								
								</div>
								
								<div class="pic pic_10">
									<div class="color color_10" id="color_10"></div>
									
									<div class="text">dfghfhgfhfgh fh fg gfghgfj ghj ghj g ghjghjg g f fj  ffgfhgfhfh ff </div>								
								</div>
							</div>
						</div>

CSS

.what_inner .screen{
		height: 620px;
		width: 1280px;
		overflow: hidden;
		background: url('../images/bg_screen.png') center top no-repeat;
		margin-bottom: 46px;
		
	}

		.screen .screen_inner{
			width: 1214px;
			height: 494px;
			margin: 42px 33px 53px;
			position: relative;
			background: #fff;
			overflow: hidden;
		}
	
			.screen .pic{
				position: absolute;
				z-index: 10;
			}
			
			.screen .color{
				opacity: 0;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;				
			}
			
			.screen .pic_03{
				top: 0px;
				left: 0px;
				width: 418px;
				height: 265px;
				background: red;			
			}	
			
			.screen .color_03{
				background: lime;	
				background-size: cover;
			}	

			.screen .pic_04{
				top: 0px;
				left: 418px;
				width: 316px;
				height: 193px;
				background: red;				
			}	
			
			.screen .color_04{
				background: lime;	
				background-size: cover;
			}

			.screen .pic_05{
				top: 0px;
				left: 734px;
				width: 267px;
				height: 240px;
				background: red;				
			}	
			
			.screen .color_05{
				background: lime;	
				background-size: cover;
			}			

			.screen .pic_06{
				top: 0px;
				left: 1001px;
				width: 213px;
				height: 240px;
				background: red;				
			}	
			
			.screen .color_06{
				background: lime;		
				background-size: cover;
			}			

			.screen .pic_10{
				top: 265px;
				left: 0px;
				width: 418px;
				height: 229px;
				background: red;					
			}	
			
			.screen .color_10{
				background: lime;	
				background-size: cover;
			}			

			.screen .pic_08{
				top: 193px;
				left: 418px;
				width: 316px;
				height: 301px;
				background: red;					
			}		
			
			.screen .color_08{
				background: lime;	
				background-size: cover;
			}			

			.screen .pic_09{
				top: 239px;
				left: 734px;
				width: 480px;
				height: 255px;
				background: red;					
			}		
			
			.screen .color_09{
				background: lime;	
				background-size: cover;
			}			

			.screen .text{
				position:...

JavaScript

(function (){	
	// -------------------------------------------------------------------------------------- screen images
	$('.screen_inner .pic').on('mouseenter', function(){
		$(this).css({'z-index': '150'}).find('.color').css({'z-index': '150'}).animate({
			'opacity': 1,
			'top': '-10px',
			'bottom': '-10px',
			'left': '-10px',
			'right': '-10px'
		},
		500, function(){		
			$(this).next().css('display', 'block');
		});	
	}).on('mouseleave', function(){
		$(this).find('.text').css('display', 'none').end().find('.color').animate({
			'opacity': 0,
			'top': '0px',
			'bottom': '0px',
			'left': '0px',
			'right': '0px'
		},
		500, function(){		

		}).css({'z-index': '10'}).end().css({'z-index': '10'});	
	});
	

})();