JSFiddle - React, Tailwind, and code Playground

by Vladislav Altyncev

HTML

<div class="pure-u-1-3 viewport">
	<div class="viewport_block" style="height: 293px;">
		<div class="viewport_text">
			<p><a href="#">Link Link Link Link Link Link Link</a></p>
			<p class="pure-hidden-phone">text</p>
			<p class="text_bottom">date</p>
		</div>
		<img src="http://dummyimage.com/280x280/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">
    </div>
</div>

CSS

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.pure-u-1-3 {
    display: inline-block;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
    width: 280px;
}
.viewport {
    position: relative;
    overflow: hidden;
    /* margin-top: -4px; */
}
.viewport .viewport_block {
    position: relative;
    height: 100%;
}
.viewport img {width: 100%;}
.viewport .viewport_text {
    /* margin-top: -4px; */
    opacity: 0;
    font-size: 14px;
    height: 100%;
    padding: 30px 25px;
    position: absolute;
    text-decoration: none;
    width: 100%;
    z-index: 100;
    color: #fff;
    background: #336699;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: translate(-50px, 0);
    -moz-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
}

.viewport:hover .viewport_text {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
}
			.viewport .viewport_text p {margin: 0 0 16px; line-height: 22px;}
			.viewport .viewport_text a {
				font-size: 18px !important; 
				color: #fff; 
				font-weight: 700;
				background: none;
				text-decoration: underline;
			}
				.viewport .viewport_text a:hover {text-decoration: none;}
			.viewport .text_bottom {position: absolute; bottom: 34px; margin: 0 !important;}