JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="http://www.commtest.com/files/scripts/mosaic.1.0.1.min.js"></script>
<div class="container">
    <!--Bar 2-->
    <div class="mosaic-block">
        <div class="details">
            <div class="toggle">About Us</div>
            <div class="togglestop"></div>
            <div class="panel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi velit, finibus quis vehicula nec, tempor sit amet tortor. Integer non mauris vitae arcu posuere rutrum.</div>
        </div>
        <div class="mosaic-backdrop">
            <img src="http://breadedcat.com/wp-content/uploads/2012/02/cat-breading-tutorial-004.jpg" />
        </div>
    </div>
    <!--Bar 2 END-->
</div>

CSS

.container {
    width:50%;
}
.container img {
    width: 100%;
    height: auto;
    display: block;
}
.mosaic-block {
    position:relative;
}
.toggle {
    display:block;
    text-align:center;
    padding:5% 0;
    width:100%;
    background:#ee1c25;
}
.details {
    display: none;
    background-color: #AAAAAA;
    padding:0px;
    position:absolute;
    bottom:0;
}
.panel {
    padding:5%;
}

JavaScript

$(document).ready(function () {
            $(".mosaic-block").hover(function () {
                $(".details", this).slideToggle("slow");
            });
        });