JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<div class="goals">
    <div class="goal-item">

        <img class="goal-image" src="//source.unsplash.com/random/600x500?1">

        <div class="goal-overlay">
            <div class="goal-body">
                <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
            </div>
        </div>

    </div>
    <div class="goal-item">

        <img class="goal-image" src="//source.unsplash.com/random/600x500?2">

        <div class="goal-overlay">
            <div class="goal-body">
                <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
            </div>
        </div>

    </div>
    <div class="goal-item">

        <img class="goal-image" src="//source.unsplash.com/random/600x500?3">

        <div class="goal-overlay">
            <div class="goal-body">
                <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
            </div>
        </div>

    </div>
    <div class="goal-item">

        <img class="goal-image" src="//source.unsplash.com/random/600x500?4">

        <div class="goal-overlay">
            <div class="goal-body">
                <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
            </div>
        </div>

    </div>
</div>

CSS

*, ::before, ::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.goals {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
}

.goal-item {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    -webkit-flex: 1 1 50%;
            flex: 1 1 50%;
    max-width: 50%;
}

.goal-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.goal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 3rem;
    color: #fff;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    visibility: hidden;
    opacity: 0;
}

.goal-body {
    font-size: 1.5rem;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    visibility: hidden;
    opacity: 0;
}

.goal-item:hover .goal-overlay {
    -webkit-transition: all 0.15s ease-out;
    -o-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
    visibility: visible;
    opacity: 1;
}


.goal-item:hover .goal-body {
    -webkit-transition: all 0.15s ease-out 0.15s;
    -o-transition: all 0.15s ease-out 0.15s;
    transition: all 0.15s ease-out 0.15s;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    visibility: visible;
    opacity: 1;
}