JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<a href="#"><div class="blog_item">
<img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" width="320px" height="160px">
<div class="blog_text">
<p>Why does this Parrot look at you funny? Why does this Parrot look at you funny? </p>
<span>➤</span>
</div>
</div>
</a>

<a href="#"><div class="blog_item">
<img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" width="320px" height="160px">
<div class="blog_text">
<p>Why does this Parrot look at you funny? </p>
<span>➤</span>
</div>
</div>
</a>

<a href="#"><div class="blog_item">
<img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" width="320px" height="160px">
<div class="blog_text">
<p>Why does this Parrot look at you funny? Why does this Parrot look at you funny? </p>
<span>➤</span>
</div>
</div>
</a>

CSS

body {font-family:arial;}

.blog_item {position:relative;width:320px;height:160px;margin:0 0 10px 0;overflow:hidden;border-radius:6px;}

.blog_item img {display:block;border-radius:6px;}

.blog_text {background-color: rgba(0, 0, 0, 0.7);position:absolute;top:0;width:100%;height:160px;border-radius:6px;}

.blog_text p {font-size:18px;transition: bottom 0.5s;color:#eeeeee;}
.blog_text span {font-size:18px;opacity:0;transition: opacity 0.5s;color:#0074D9;}

.blog_text p, .blog_text span {position:absolute;bottom:20px;padding:0 20px;margin:0;}

.blog_item:hover .blog_text p {bottom:50px;}
.blog_item:hover .blog_text span {opacity:1;}