Как текст пропадет при наведении курсора?

Question

[Marizza40]

Картинка затемнена черным цветом. Необходимо, чтобы на черном цвете был текст, который при наводе исчезал вместе с черным цветом. Максимум что смогла сделать: (строго не судите, самоучка). Делаю через шаблоны Битрикса, java не работает, даже внешняя не срабатывает. Необходимо только через css и 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>

.containerWrapperProva{
    max-width: 1500px;
    margin: 0 auto;
}
    
.slider_gallery_expand{
    background:#000;}
/*img*/
    
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;
}

Answer 1

[Alams Stoyne]

.img_black:hover .vis
{
    display:none;
}