JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div>
            <h3>18.03.2010 Headline</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <p><a href="#">Artikel öffnen</a></p>
        </div>
    </li>
</ul>

CSS

body { font: 12px/1.4 sans-serif; }
ul {
    margin: 0; padding: 0; list-style: none;
}
ul li {
    width: 370px; height: 330px; background: url(http://dummyimage.com/370x330/) no-repeat;
    position: relative; overflow: hidden;
}
ul li div {
    background: #999; width: 350px; height: 90px; padding: 10px; position: absolute; bottom: -40px; left: 0;
}
h3 { font-size: 13px; font-weight: bold; text-transform: uppercase; margin: 0 0 2px 0; }
p { margin: 0 0 10px 0; }
a { font-weight: bold; text-decoration: none; }

JavaScript

$("li").hover(function() {
    $(this).find("div").animate({
        bottom: 0,
        backgroundColor: "lightgreen"
    }, {
        duration: 300,
        easing: "easeOutCirc",
        queue: false
    });
}, function() {
    $(this).find("div").animate({
        bottom: "-40px",
        backgroundColor: "#999"
    }, {
        duration: 300,
        easing: "easeOutCirc",
        queue: false
    });
});