JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slide_img">
<div class="shadow"></div>
  <ul class="clearfix">
   <li><img src="themes/company/img/01.png"></li>
   <li><img src="themes/company/img/02.png"></li> 
   <li><img src="themes/company/img/03.png"></li> 
   <li><img src="themes/company/img/04.png"></li> 
   <li><img src="themes/company/img/05.png"></li> 
   <li><img src="themes/company/img/01.png"></li>  
 </ul>
</div>

CSS

.shadow {
  background: none no-repeat scroll center center #000000;
  height: 250px;
  left: 0;
  margin: 0;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  width: 1838px;
  z-index:2;
}

img.show{
    position:relative;
    z-index:3;
}
#slide_img {
 display: block;
height: 250px;
overflow: hidden;
position: relative;
width: 1838px;
}
#slide_img ul li {
  float:left;
  margin:0;
  font-size:0;
}
#slide_img ul {
  padding:0;
}

JavaScript

$(document).ready(function(){
    $('#slide_img .shadow').hover(function(){
        $('#slide_img img').addClass('show');      
    },function(){
        $('#slide_img img').removeClass('show');
    });
    
    $('#slide_img img').hover(function(){
        $('#slide_img .shadow').hide();
    },function(){
        $('#slide_img .shadow').show();        
    });
});