JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://fonts.googleapis.com/css?family=Josefin+Sans|Nunito:400,600"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
            <div class="row">
                <div class="col-md-3 recipe">
                    <div class="slider-text">
                        <h3>Bear Creek Chili</h3>
                        <p class="slider-submit">
                            Submitted by: Dottie User
                        </p>
                    </div>
                    <img id="chili-img" src="http://mystateoffitness.com/wp-content/uploads/2016/07/big-game-chili.jpg">
                </div>
                <div class="col-md-3 recipe">
                    <div class="slider-text asparagus-slider">
                        <h3 id="asparagus">Beer Battered Asparagus with Lemon Herb Dipping Sauce</h3>
                        <p class="slider-submit">
                            Submitted by: Chris User
                        </p>
                        <p class="slider-description">
                            <em>"This is the only way that I can enjoy asparagus"</em>
                        </p>
                    </div>
                    <img id="asparagus-img" src="http://food.fnr.sndimg.com/content/dam/images/food/fullset/2007/9/10/0/IP0211_Beer_Battered_Asparagus.jpg.rend.hgtvcom.616.462.jpeg">
                </div>
                <div class="col-md-3 recipe">
                    <div class="slider-text">
                        <h3>Mac n' Cheese</h3>
                        <p class="slider-submit">
                            Submitted by: Annette User
                        </p>
                    </div>
                    <img id="macCheese-img"...

CSS

.recipe {
                position: relative;
                display: inline-block;
                white-space: nowrap;
                overflow-y: hidden;
                font-family: 'Nunito', sans-serif;
                font-weight: 600;
                text-align: center
            }
            
            .slider-text {
                position: absolute;
                bottom: 0;
                width: 200px;
                padding: 0% 3% 3% 3%;
                color: white;
                white-space: normal;
                background: rgba(0,0,0,0.45);
                overflow: hidden;
                z-index: 100;
                margin-left: 3px;
            }
            
            .slider-text:not(.asparagus-slider) {
                padding: 6% 3% 3% 3%;
            }
            
            .slider-text > h3 {
                font-size: 15px;
            }
            
            #asparagus {
                font-size: 14px;
                padding: 0% 3% 3% 3%;
            }
            
            .slider-info {
                padding-bottom: 30px;
            }
            
            .slider-description {
                display: none;
            }
            
            #chili-img, #asparagus-img, #macCheese-img, #noBakePie-img {
              width: 200px;
              height: 200px;
            }

JavaScript

$(".recipe").hover(function(){
								$(this).find(".slider-submit").hide();
                $(this).find(".slider-description").show();
            },
            function(){
                $(this).find(".slider-submit").show();
                $(this).find(".slider-description").hide();
            });