Hover-Effect disappears, when hovering over Text - html

Question

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 any changes
Issue: when I hover over the text, the color hover overlay disappears (it's just visible when I move around in the Div without moving it over the text)
I tried some other solutions, like pseudo classes, but I didn't make it work...thank ya'll!
#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 img:hover {
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>

Answer 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>