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.active{
              z-index: 11;                
            }
            .screen .pic.active .color{
             opacity:1;
             top: -10px;
             left: -10px;
             right: -10px;
             bottom: -10px; 
            }
			.screen .pic{
				position: absolute;
				z-index: 10;
			}
			
			.screen .color{ 
                display: none;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;		
              
               transition: 0.4s ease;
               -webkit-transition: 0.4s ease;
               -moz-transition: 0.4s ease;
			}
			
			.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...

JavaScript

(function (){	
	// -------------------------------------------------------------------------------------- screen images
	$('.screen_inner .pic').on('mouseenter', function(){
        $(".pic.active").removeClass("active")
		$(this).addClass("active")
        $(this).find(".text,.color").stop().fadeIn(300)
	}).on('mouseleave', function(){
        $(this).removeClass("active")	
        $(this).find(".text,.color").stop().fadeOut(300)
	});
	

})();