JSFiddle - React, Tailwind, and code Playground

HTML

<a class="item show" href="#">
    <img class="image" alt="Яндекс" src="http://yandex.st/morda-logo/i/logo.png" >
    <p class="title">TEST POST 1</p>
    <p class="year">2013</p>
    <p class="cat">category</p>
</a>

JavaScript

$(document).ready(function() {
    
    $('.show').each(function() {
        
        var image = $('.image', this);
        
        image.animate({opacity:'0.0'},1);
        
        $(this).mouseover(function(){
            image.stop().animate({opacity:'1.0'},600);
        });
        
        $(this).mouseout(function(){
            image.stop().animate({opacity:'0.0'},300);
        });
    
    });
    
});