JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
                    <div class="eaRes" style="background:#000;">
                        <div class="eaResOuter">
                            <div class="eaResInner white">
                                <h3>Content</h3>
                                <div class="pad expandres">
                                    Show content
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="eaRes" style="background:#000;">
                        <div class="eaResOuter">
                            <div class="eaResInner white">
                                <h3>Content</h3>
                                <div class="pad expandres">
                                    Show content
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="eaRes" style="background:#000;">
                        <div class="eaResOuter">
                            <div class="eaResInner white">
                                <h3>Content</h3>
                                <div class="pad expandres">
                                    Show content
                                </div>
                            </div>
                        </div>
                    </div>

CSS

.eaRes { height: 250px; width: 32.8%; margin: 0.1%; float: left; cursor: pointer; }
.eaResOuter { display: table; width: 100%; background: rgba(15, 15, 15, 0.6); transition: all 0.3s ease 0s; }
.eaResOuter:hover { background: rgba(15, 15, 15, 0.8); }
.eaResInner { display: table-cell; text-align: center; vertical-align: middle; height: 250px; }
.eaResInner .icon { color: #fff; font-size: 40px; }
.eaResInner .pad { display: none; color: #fff; width: 80%; margin: 0 auto; font-style: italic; }
.eaResInner h3 { margin: 10px 0; padding: 0; }

JavaScript

$(document).ready(function () {
    $(".eaRes").mouseover(function () {
        $(this).find(".expandres").stop().slideDown("fast");
    });
    $(".eaRes").mouseout(function () {
        $(this).find(".expandres").slideUp("fast");
    });
});