JSFiddle - React, Tailwind, and code Playground

HTML

<div id="portfolio-projects" class="" >
                                <div class="five columns portfolio-item">
                                    <div class="portfolio-image-3col">
                                        <img src="" />
                                    </div>
                                    <div class="portfolio-desc-3col">
                                        Desc
                                    </div>
                                </div>
                                <div class="five columns portfolio-item">
                                    <div class="portfolio-image-3col">
                                        <img src="" />
                                    </div>
                                    <div class="portfolio-desc-3col">
                                        Desc
                                    </div>
                                </div>
                                <div class="five columns portfolio-item">
                                    <div class="portfolio-image-3col">
                                        <img src="" />
                                    </div>
                                    <div class="portfolio-desc-3col">
                                        Desc
                                    </div>

                                </div>
                            </div>

CSS

#portfolio-projects{
    margin: 10px auto;
}

.portfolio-item{
    border: 1px solid #eee;
    margin: 10px 20px;
    position: relative;
}

.portfolio-image-3col{
    background: -moz-linear-gradient(center top , #5AA7EE, #317ECF) repeat scroll 0 0 transparent;
    border: 2px solid #FFFFFF;
    height: 200px;
    outline: 1px solid #EEEEEE;
}
.portfolio-desc-3col{
    background: none repeat scroll 0 0 red;
    border: 2px solid #FFFFFF;
    height: 200px;
    outline: 1px solid #EEEEEE;
    position: absolute;
    top: 0;
    width: 100%;
    display: none;
}

JavaScript

$(".portfolio-image-3col").on("mouseenter",function(){

                    $(this).parent().find(".portfolio-desc-3col").stop(true, true).slideDown("fast");
             
                });
                $(".portfolio-desc-3col").on("mouseout",function(){
                    $(this).parent().find(".portfolio-desc-3col").stop(true, true).slideUp("fast");

                });