JSFiddle - React, Tailwind, and code Playground

HTML

<div class="us__slaider-container">
            <div class="us__img-wrap">
                <div class="us__img-slaider">
                    <div>
                        <img src="http://lorempixel.com/50/50" alt="" class="us__img">
                    </div>
                    <div>
                        <img src="http://lorempixel.com/50/50" alt="" class="us__img">
                    </div>
                    <div>
                        <img src="http://lorempixel.com/50/50" alt="" class="us__img">
                    </div>
                    <div>
                        <img src="http://lorempixel.com/50/50" alt="" class="us__img">

                    </div>
                    <div>
                        <img src="http://lorempixel.com/50/50" alt="" class="us__img">
                    </div>
                </div>
            </div>
        </div>

CSS

.us__slaider-container {
  position: relative;
}

.us__img-slaider {
  display: flex;
}

.us__img {
  margin-left: 15px;
  margin-right: 15px;
}
        
.us__img-wrap._image-hovered .us__img {
  opacity: 0.5;
}

.us__img-wrap._image-hovered .us__img:hover {
  opacity: 1;
}

JavaScript

$(function() {

	var $images = $('.us__img'),
  		$container = $('.us__img-wrap');
      
      $images.on('mouseover', function() {
      	$container.addClass('_image-hovered');
      });
      
      $images.on('mouseout', function() {
      	$container.removeClass('_image-hovered');
      });

});