JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<ul id="kittens">
    <li>
        <a href="#">
            <img src="http://placekitten.com/g/200/200" />
            <div><em>Take A Look!</em></div>
        </a>
    </li>    
    <li>
        <a href="#">
            <img src="http://placekitten.com/g/200/200" />
            <div><em>I'm A Kitten!</em></div>
        </a>
    </li>        
    <li>
        <a href="#">
            <img src="http://placekitten.com/g/200/200" />
            <div><em>MEOW!</em></div>
        </a>
    </li>    
</ul>

CSS

a { text-decoration: none; font: sans-serif; color: white; text-transform: uppercase; line-height: 210px; text-align: center;  }

ul#kittens { width: 670px; margin: 100px auto; overflow: hidden; }

ul#kittens li { display: inline; margin: 10px 0; overflow: hidden; }

ul#kittens li a { height: 200px;  display: block; float: left;  margin: 10px; }

ul#kittens li a img { 
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;    
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    opacity: 1;
}

ul#kittens li a img:hover  { 
    opacity: .95; 
}

ul#kittens li a div { 
    position: relative;
    margin-top: -600px; 
    background: rgba(0,0,0,.5);
    width: 200px; 
    height: 200px;
    display: block;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;    
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

ul#kittens li a:hover div { 
    margin-top: -300px; 
}