JSFiddle - React, Tailwind, and code Playground

by realseanp

HTML

<div class="holder">
 <img src="http://ak1.ostkcdn.com/images/products/6178463/All-season-Premier-Microfiber-Down-Alternative-Comforter-P13831625.jpg">
    <div class="info">
        <span>Cool Stuff</span>
        <div class="overlay"></div>
    </div>      
</div>

CSS

.holder{
    position:relative;
    height:200px;
    width: 200px;
    overflow: hidden;
    border:1px solid #000;
    z-index:3;
}

.info {
    box-sizing: border-box;
    height: 100%;
    padding: 20px;
    position: absolute;
    top: -100%;
    transition: top 0.5s ease 0s;
    width: 100%;
    z-index: 4;
    color: #fff;
    
}

.overlay {
    background: none repeat scroll 0 0 #000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    transition: 1s all;
}

.holder:hover .info{
    top:0;
}

.holder:hover .overlay{
    opacity: .85
}