Can't keep buttons from disappearing after hovering out of an adjacent element

Question

I feel like I'm missing something obvious but I can't seem to find the best way to make it so the buttons below an image don't disappear once you hover off said image. What is meant to happen is you hover over the image to show the buttons, allowing you to click on them. On hovering out of the buttons, only then should they disappear.

I've tried using mouseenter and mouseleave as well as what is shown below (which I found from an example online). I also tried adding more padding below the images to increase the hover area with no luck.

I feel so dumb but this has had me stumped all day.

Codepen:https://codepen.io/gojiHime/pen/eKKroR?editors=0111

jQuery:

$(document).ready(function() {
  $(".thumb").each(function() {
    $(this).hover(
      function() {
        $learn = $(this)
          .parent()
          .prev();
        $cta = $(this).next();
        $learn.stop(true, true).fadeIn();
        $cta.stop(true, true).fadeIn();
      },
      function() {
        $learn = $(this)
          .parent()
          .prev();
        $cta = $(this).next();
        $learn.stop(true, true).fadeOut();
        $cta.stop(true, true).fadeOut();
      }
    );
  });
});

Answer 1

You are using display:none; on your buttons. You are hiding them from the page where there is no possible way to 'hover' over them. Instead use, opacity, to hide the button's while keeping them accessible to your cursor.

You also don't have to loop through the selector elements since jQuery already does it for you. So, you can reduce your jQuery code.

css

.learn-more {
  opacity: 1;
  /* your other css */
}

js

$(document).ready(function() {
  $('.inner').hover(function() {
    $(this).find('.learn-more').css({'opacity':'1'})
  }, function(){
    $(this).find('.learn-more').css({'opacity':'0'})
  });
});