JSFiddle - React, Tailwind, and code Playground

by Ryan Mitchell

HTML

<div class="container">
    <div class="content">
        <div class="info">Info Header!</div>        
        <img src="http://placekitten.com/202/300" />
        <p>Some content.</p>
    </div>
</div>

CSS

.content {
    font-size: 1.2em;
    padding: 5em;
}
.content .info {
    opacity: 0;
    transform: translateX(-100vw);
    transition: opacity .4s, transform .4s;
}
.content img {
    opacity: 0;
    transition: opacity .4s;
}
.content:hover .info {
    opacity: 1;
    transform: translateX(0);
}
.content:hover img {
    opacity: 1
}
}