Es porque mezclaste funciones de entrada y salida en una sola. Entonces, su segunda función que (supongo) debería llamarse con el mouse fuera nunca se llama.

Debe desenvolver esa función de la primera y ponerla como segundo argumento para .hover

 $(document).ready(function() { $(".image-container").hover( function() { $(this).parents().children().children('.image-01').css({ 'background-color': '#D4E619', 'opacity': '0.5' }) }, function() { $(this).parents().children().children('.image-01').css({ 'background-color': '#FFFFF', 'height': '0', 'opacity': '0', 'visibility': 'hidden' }); } ); });

Algunas sugerencias (bastante abstractas ya que no se proporciona HTML):

1. Puede reducir la complejidad del selector encontrando el envoltorio único más cercano y luego encontrar el elemento deseado: $(this).closes('.image-wrapper').find('.image-01')
2. A través de JS, aplique solo visualización/opacidad. A través de CSS establece reglas para el elemento cuando se muestra, no tiene sentido configurar su fondo si no está visible: $(this).[..].show(), $(this).[..].hide()
3. Supongo que puedes hacerlo con css: .image-wrapper:hover .image-01{display: block;}

Sugerencias:

1. Use id para la imagen, para que pueda reducir la complejidad de dom.
2. Use dos eventos separados (.hover y .mouseout)
3. Use funciones de flecha en lugar de la palabra clave 'función'

Ejemplo:

 $(document).ready(()=>{ $("#image-01").hover(()=>{ /* css code for hover here */ } $("#image-01").mouseout(()=>{ /* css code for mouseout here */ } }

Editar:

1. Tal vez puedas deformar todas tus imágenes en un elemento div.
   Entonces puedes usar

   let imágenes = $(' /* id del contenedor */ ').niños()

   Para conseguir a sus hijos.

   Luego, simplemente recorra las imágenes y agregue eventos de desplazamiento