JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>Condividere markup css e js</title>
    </head>
    
    <body>
    
        <ul class="hover_block">
            <li>che ne pensi julius?<img src="http://www.flashmotus.it/images/2008/06/juliusdesign.jpg" />
            </li>
        </ul>
    </body>
</html>

CSS

ul.hover_block li{
            list-style:none;
            float:left;
            background: #fff;
            padding: 10px;
            width:300px; position: relative;
            margin-right: 20px; }
 
        ul.hover_block li a {
            display: block;
            position: relative;
            overflow: hidden;
            height: 150px;
            width: 268px;
            padding: 16px;
            color: #000;
            font: 1.6em/1.3 Helvetica, Arial, sans-serif;
        }
 
        ul.hover_block li a { text-decoration: none; }
 
        ul.hover_block li img {
            position: absolute;
            top: 0;
            left: 0;
            border: 0;
        }

JavaScript

$(function() {
    var TotalHeight = $('ul.hover_block li').outerHeight();
    $('ul.hover_block li').hover(function(){
    $(this).find('img').animate({top: TotalHeight+'px'},{queue:false,duration:500});
             }, function(){
    $(this).find('img').animate({top:'0px'},{queue:false,duration:500});
    });
    });