El efecto de desplazamiento desaparece al pasar el cursor sobre el texto

el tema lo dice, mi problema es el siguiente:

  • Quiero tener una superposición de color cuando coloco el cursor sobre mi foto
  • el texto en la imagen debe ser visible antes y después de desplazarse sin cambios
  • Problema: cuando sobrevivo el texto, la superposición de desplazamiento por el color desaparece (solo es visible cuando me muevo por la div sin moverla sobre el texto)
  • Intenté algunas otras soluciones, como pseudo clases, pero no lo hice funcionar … ¡gracias ya!
@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; } 
  
Hover over Me
Overlay Disappears
Hover over Me
Overlay Disappears
Hover over Me
Overlay Disappears

Cuando pasas el cursor sobre el texto, ya no cierras el img . Cambie su selector a .image_box_one:hover img para que cuando pase el ratón sobre cualquier elemento en .image_box_one , aplique estilos al 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; } 
  
Hover over Me
Overlay Disappears
Hover over Me
Overlay Disappears
Hover over Me
Overlay Disappears