JSFiddle - React, Tailwind, and code Playground

by Chuck Tornton

HTML

<div class="containerWrapperProva">
    	<div class="slider_gallery_expand">
            <div class="controlli">
      <div class="back_btn"></div>
      <div class="next_btn"></div>
    </div>
    </div>
<div class="row muovi animationA">
        <div class="item">
            <div class="img_black">
           <img src="https://c.radikal.ru/c09/1908/2d/1cf0621db1c9.jpg" alt="Модернизация КНС" title="Модернизация КНС">
                <div class="txt_vis">
                <div class="vis">Some text</div>
                </div>
            </div>  
              <div class="wrap-text">
                <h1 class="text">Модернизация КНС</h1>	
              </div>
        </div>
           <div class="item">
               <div class="img_black">
           <img src="https://c.radikal.ru/c09/1908/2d/1cf0621db1c9.jpg" alt="Модернизация КНС" title="Модернизация КНС">
               </div>
              <div class="wrap-text">
                <h1 class="text">Проектирование КНС</h1>	
              </div>
        </div>
        <div class="item">
            <div class="img_black">
           <img src="https://c.radikal.ru/c09/1908/2d/1cf0621db1c9.jpg" alt="Модернизация КНС" title="Модернизация КНС">
            </div>
              <div class="wrap-text">
                <h1 class="text">Монтаж КНС</h1>	
              </div>
        </div>
        <div class="item">
            <div class="img_black">
           <img src="https://c.radikal.ru/c09/1908/2d/1cf0621db1c9.jpg" alt="Модернизация КНС" title="Модернизация КНС">
            </div>
              <div class="wrap-text">
                <h1 class="text">Пусконаладка КНС</h1>	
              </div>
        </div>
     </div>  
    </div>

CSS

.containerWrapperProva{
    max-width: 1500px;
    margin: 0 auto;
}
    
.slider_gallery_expand{
    background: #000;
}

    
img {
    max-width: none;
}
    
.img_black {
      opacity: 0.5;
      transition: all 300ms ease-out;
  }
    
.img_black:hover {
      opacity: 1;
  }
/*item*/
    
.item{
    float: left;	
    overflow: hidden;
    -webkit-transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
    -moz-transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
    -ms-transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
    -o-transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
    transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
    cursor: pointer;
    position: relative;
    background: #000
  }
.muovi{
    position: relative;
    width: 3000px;
  }
.animationA{
    -webkit-transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
    -moz-transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
    -ms-transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
    -o-transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
    transition: 300ms cubic-bezier(0.250, 0.460, 0.450, 0.940) all;
     
  }
  .wrap-text{
    background: rgba( 0, 0, 0, 0.6);
        font-family: 'Montserrat', sans-serif;
    text-align: center;
    position: absolute;
    z-index: 100;
    margin-top: -100px;
    padding:20px 10px;
    bottom: 0px;
        width: 100%;}
    
/*text*/
    
 .text {
            font-family: 'Montserrat', sans-serif;
      padding:0px;
      margin:0px;
      color: #fff;
      font-size: 30px;
     text-align: center;}
.text_slaider {
    font-size: 16px;   
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    text-align: center;
    
    position: absolut;
    bottom: 0;
    top: 0;
    padding: 5px;
}
    
.vis
{
    position:absolute;
    top:0;
    left:0;
    height:632px;
    width:383px;
}

.vis:hover
{
    display:none;
}