Hover-Effect Disappears, When Hovering Over Text

the topic is saying it - my problem is following: I want to have a color overlay when I hover over my picture the text on image should be visible before and after hovering without

Solution 1:

When you hover over the text, you're no longer hovering the img. Change your selector to .image_box_one:hover img so that when you hover over anything in an .image_box_one, it will apply styles to the img

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

  .text_z{
            color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); 
            z-index: 999;
        }
        
        
        .image_box_one img {
            width: 100%;
            display: block;
            height: auto;

        }
        
        .image_box_one {
             background: rgba(29, 106, 154, 0.72);
            padding:0px;
            margin:0px;
        }
      
         
        .image_box_one:hover img {
            opacity: 0.5;
        }
        

   <div class="container">
          <div class="row">
               <div class="col-lg-4">
               <div class="image_box_one">
               <img src="http://placehold.it/1332x1017" />
               <div class="text_z">Hover over Me <br>Overlay Disappears</div>
               </div>
          </div>
           <div class="col-lg-4">
               <div class="image_box_one">
               <img src="http://placehold.it/1332x1017" />
               <div class="text_z">Hover over Me <br>Overlay Disappears</div>
               </div>
          </div>
           <div class="col-lg-4">
               <div class="image_box_one">
               <img src="http://placehold.it/1332x1017" />
               <div class="text_z">Hover over Me <br>Overlay Disappears</div>
               </div>
          </div>
    </div>             
  </div>