JSFiddle - React, Tailwind, and code Playground

by sweetmaanu

HTML

<div class="wrap">
    <div class="colums">
        <img src="http://placehold.it/350x300&text=FooBar1" alt=""/>
        <div class="headline"><strong>Lorem ipsum</strong><br/> onsectetuer adipiscing elit.</div>
    </div>
    <div class="colums">
        <img src="http://placehold.it/350x300&text=FooBar2" alt="" />
        <div class="headline"><strong>Lorem ipsum</strong><br/> dolor sit amet consectetuer fdsfsdf fdf  adipiscing elit.</div>
    </div>
    <div class="colums">
        <img src="http://placehold.it/350x300&text=FooBar3" alt=""/>
        <div class="headline"><strong>Lorem ipsum</strong><br/> dolor sit amet consectetuer adipiscing elit.</div>
    </div>
</div>

CSS

.wrap {
    width: 100%;
    overflow: hidden;
}
img {
    max-width: 100%
}
.colums {
    position: relative;
    overflow: hidden;
    float: left;
    width: 33.3333%;
    border: 1px solid #FF0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.headline {
    width: 100%;
    height: 100%;
    color: #FFF;
    background: rgba(0, 0, 0, 0.5);
    line-height: normal;
    padding: 5%;
    position: absolute;
    bottom: -75%;
    z-index: 99;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: bottom 0.5s ease-out 0s;
    -moz-transition: bottom 0.5s ease-out 0s;
    -ms-transition: bottom 0.5s ease-out 0s;
    -o-transition: bottom 0.5s ease-out 0s;
    transition: bottom 0.5s ease-out 0s;
}
.colums:hover .headline {
    bottom: 0;
}