JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circleContainer">
    <div class="circleBase">
        <p>Lorem ipsum</p>
        <hr>
        <p> 
            <strong class="gray">gdroel</strong>
        </p>
    </div>
    <div class="overlay" style="display: none;">
        <p class="date">11/12/14</p>
    </div>
</div>

CSS

.circleContainer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    border-radius: 75px;
    background-color: #ccc;
}

JavaScript

$(function () {
    $(".circleContainer").mouseenter(function () {
        $(this).find('.circleBase').hide();
        $(this).find(".overlay").fadeIn("fast");
    });

    $(".circleContainer").mouseleave(function () {
        $(this).find(".overlay").hide();
        $(this).find(".circleBase").fadeIn("fast");
    });
});