JSFiddle - React, Tailwind, and code Playground

by unhw

HTML

<div class="media-post">
    <div class="media-post__overlay">
        <h3>A thing</h3>
        <span>this is a thing</span>
    </div>
   <img class="media-post__img" src="//placekitten.com/200/200" alt="kitten!" />
</div>

CSS

.media-post {
    color: white;
    text-align: center;
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
}

.media-post__img,
.media-post__overlay {
    width: 100%;
    height: 100%;
}

.media-post__overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);

    -webkit-transform: translate(0, 200px);
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
}

.media-post:hover .media-post__overlay {
    -webkit-transform: translate(0, 0);
}