JQuery Hover Method - Out function is not working

I am applying an hover effect on an image with JQuery.

State on page load :

State on hover :

State on mouseout :

Here is the code snippet :

$(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'});
    });
});
});

I tried several css instructions but the image keeps the hover state.

Edit :

The final goal is to have a different hover color on several images inside a grid. All elements of the grid have the same classname.

I use a first JQuery function to append the classnames and then, generates a specific hover state on some images.

It's because you mixed in and out functions into single one. So your second function that (I assume) should be called on mouse out is never called.

You should unwrap that function from first one and put as second argument for .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'
      });
    }
  );
});

Some suggestions (quite abstract since no HTML is provided):

1. You can reduce complexity of selector by finding closest unique wrapper and then find desired element: $(this).closes('.image-wrapper').find('.image-01')
2. Via JS apply only display/opacity. Via CSS set rules for element when it's shown, no point in setting it's background if it's not visible: $(this).[..].show(), $(this).[..].hide()
3. I assume you can just do it with css: .image-wrapper:hover .image-01{display: block;}