JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="projectImages">
    <li>
        <img src="http://www.spacew.com/gallery/image005815-thumb.jpg" />
        <div class="imageCaption">
            <p>Caption One</p>
        </div>
    </li>
    <li>
        <img src="http://www.bloggodown.com/wp-content/uploads/2010/11/free-image-stock-exchanges.jpg" />
        <div class="imageCaption">
            <p>Caption Two</p>
        </div>
    </li>
</ul>

CSS

.imageCaption{
    display:none;
    position:absolute;
    background:rgba(0,0,0,0.25);
    bottom:-50px;
    width:100%;
    color:#fff;
}

.projectImages li{
    display:block;
    float:left;
    position:relative;
    overflow:hidden;
}

JavaScript

jQuery(document).ready(function() {
    $(".projectImages li").mouseenter(

    function() {
        var $li = $(this);

        $li.find(".imageCaption").animate({
            opacity: "show",
            bottom: 0
        }, "fast");

    }).mouseleave(

    function() {
        $(this).find(".imageCaption").animate({
            opacity: "hide",
            bottom: -70
        }, "fast");
    });
});