JSFiddle - React, Tailwind, and code Playground

by RenaissanceDesign

HTML

<ul>
    <li>
        <div>
            <img src="http://placehold.it/150x300"/>
            <h3>Hello</h3>
            <p>Dummy text will go here.</p>
            <p><a href="#">I am a link</a>
        </div>
    </li>
    <li>
        <div>
            <img src="http://placehold.it/150x300"/>
            <h3>Hello</h3>
            <p>Dummy text will go here.</p>
            <p><a href="#">I am a link</a>
        </div>
    </li>
    <li>
        <div>
            <img src="http://placehold.it/150x300"/>
            <h3>Hello</h3>
            <p>Dummy text will go here.</p>
            <p><a href="#">I am a link</a>
        </div>
    </li>                
</ul>

CSS

ul { overflow: hidden; /*clear floats*/ }
li {
    float: left;
    width: 150px;
    height: 300px;
    margin-right: 20px; 
    position: relative;
    background: #eee;
    overflow: hidden;
}

li div {
    position: absolute;
    top: 0; left: 0;
    -webkit-transition: top ease-in-out .3s;
}

li:hover div {
    top: -300px;   
    -moz-transition: top 1s; 
    -webkit-transition: top 1s;
    -o-transition: top 1s; 
    transition: top 1s;

}