What method should be used in JS code to make the block appear smooth on hover?

Question

css

$('.portfolio-rhombs, .portfolio-rhomb').on( "mouseenter", function() {
        $(this).find('.portfolio-rhombs__view, .portfolio-rhomb__view').css({
            "display": "none"
        });
        $(this).find('.portfolio-rhombs__modal, .portfolio-rhomb__modal').css({
            "display": "block"
        });
    });
    $('.portfolio-rhombs, .portfolio-rhomb').on( "mouseleave", function() {
        $(this).find('.portfolio-rhombs__modal, .portfolio-rhomb__modal').css({
            "display": "none"
        });
        $(this).find('.portfolio-rhomb__view').css({
            "display": "block"
        });
        $(this).find('.portfolio-rhombs__view').css({
            "display": "grid"
        });
    })

Answer 1

https://api.jquery.com/fadein/

Answer 2

<div id="block">hover me</div>

function getHidden (hide , seconds , animation) {
  block.setAttribute('style',`
    width:100px; 
    height: 50px; 
   cursor:pointer;
    background: ${hide ? "red" : "none"}; 
    transition: ${seconds}s ${animation};
  `)
} 


block.addEventListener('mouseover' , () => getHidden(true,1,"ease-in") )
block.addEventListener('mouseout' , () => getHidden(false,1,"ease-out") )