JSFiddle - React, Tailwind, and code Playground

by verashn

HTML

<div class="box">
     <h1>why</h1>

    <div>
        <p>Our purpose, our difference. We are a 100+ person collective from around the world that come together in custom configuration based on each specific client mission, to move their innovation needles, but through a holistic and single lens. A globally networked problem solving and creating Brain.</p>
    </div>
</div>

CSS

.box {
    background-color: yellow;
    display: inline-block;
    float: left;
    height: 320px;
    margin: 0 155px 40px 0;
    position: relative;
    width: 320px;
    z-index: 1000;
}
.box > div {
    display: inline-block;
    width:280px;
    height:280px;
    padding:20px;
}
.box > div p {
    color: #FFFFFF;
    display: none;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    position: relative;
    top: 28px;
    width: 450px;
}
.box h1 {
    font-size: 40px;
    height: 0;
    padding-top: 0;
    position: relative;
    text-align: center;
    top: 32%;
    font-family:'DeftoneStylus';
}
.box:nth-child(1) > div {
    background-color:red;
}
.box:nth-child(1):hover > div {
    background-color:blue;
}
.box:nth-child(1):hover h1 {
    color:#94C11F;
}

JavaScript

$( document ).ready(function() {
    $('.box').hover(function() {
        $(this).clearQueue().css('z-index', '10000');
        var content = $(this).find('div');
        content.find("p").css('display', 'block');
        content.animate({
            width: 785, height: 280, margin: 0
        });
    }, function() {
        $(this).clearQueue().css('z-index', '100');
        var content = $(this).find('div');
        content.find("p").css('display', 'none');
        content.animate({
            width: 280, height: 280, margin: 0
        }, function() {
            $(this).parent().css('z-index', '0');
        });
    });
});