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_oneimg {
            width: 100%;
            display: block;
            height: auto;

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

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