How can I hover over image and display block of text with easing?

Question

What I want when I hover over an image of a tree is that a block of text appears, which already works, but I want the block of text to appear with ease. This is what I have already and that works, just not the ease-part:

HTML:

<p id="hover-text1" class="hover-text1"> Accomplished! </p>
<img id="tree_image1" class="tree_image1" src="/Tree-red.png">

CSS:

.hover-text1 {
 display: none;
 transition: .5s all ease;
 }

.tree_image1:hover {
 opacity: 0.3;
 }

JS (which is the head of my HTML file):

<script type="text/javascript">
    $(document).ready(function(){
      $('#tree_image1').mouseenter(function(){
        $('#hover-text1').css({'display':'block'});
      });
      $('#tree_image1').mouseleave(function(){
        $('#hover-text1').css({'display':'none'});
      });
    });
  </script>

So when you hover over tree_image1, the block of text hover-text1 appears and when you go away from the image with the mouse, the block of text disappears. But I would like that block of text to appear with a 0.5s ease, but the way I did it now doesn't work. Can anyone help?

Also, I'm using a local server, node js, ejs and express, maybe that is of importance.

Answer 1

Display is not one of the properties that transition works upon. You can give transition to visibilty and opacity to achieve this

<div class="wrapper">
    <p class="hover-text1"> Accomplished! </p>
    <img id="tree_image1" class="tree_image1" src="/Tree-red.png">
  </div>

.hover-text1 {
  visibility: hidden;
  opacity: 0;
  transition: visibility 2s, opacity 2s linear;
  }

 .tree_image1:hover {
  opacity: 0.3;
  }

.wrapper:hover .hover-text1 {
  visibility: visible;
  opacity: 1;

}

Answer 2

You can use jQuery's fadeIn/fadeOut for the same

$(document).ready(function(){
  $('#tree_image1').mouseenter(function(){
    $('#hover-text1').fadeIn(500);// 500 - time interval
  });
  $('#tree_image1').mouseleave(function(){
    $('#hover-text1').fadeOut(500);
  });
});