JSFiddle - React, Tailwind, and code Playground
by Mustafa Kaba
HTML
<style>
#bt_imageeffect {
margin: 20px auto;
width: 100%;min-height: 300px; padding: 20px 0;
text-align: center;
}
.galleryItem {
display: inline-block;;
position: relative;
width: 250px; height: 250px;
padding: 0;margin: 0 20px;
border: solid 10px #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.galleryItem img {
width: 250px;height: 250px;
}
.caption {
position: relative;
display: inline-block;
width: 250px; height: 250px;
z-index: 10;
}
.caption::before {
content: attr(data-title);
position: absolute;top: 0; left: 0;
width: 250px; height: 0;
font-family: 'Croissant One', cursive;
font-size: 1.8em;font-weight: 600;
line-height: 1.4em;color: #086FA1;
background: #fff;
overflow: hidden;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.caption::after {
content: attr(data-description);
position: absolute;
bottom: -0;left: 0;
width: 250px;height: 0;
font-family: 'Poiret One', cursive;
font-size: 1.1em;
font-weight: 400;
line-height: 1.4em;color: #fff;
background: #222;
overflow: hidden;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-ms-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.caption:hover::before {
height: 125px;
}
.caption:hover::after {
bottom: 0;height: 125px;
}
</style>
<div id="bt_imageeffect">
<li class="galleryItem">
<a class="caption" data-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sapien condimentum, sagittis erat rhoncus, bibendum nisi." data-title="Nature Scene" href="#">
<img alt="Nature Scene" src="http://4.bp.blogspot.com/-QJLngeQlh6w/Ul0tzyGvaSI/AAAAAAAAIHQ/jlq6EB7vPDE/s1600/Green+Nature+Wallpapers.jpg"/>
</a></li>
<li class="galleryItem">
<a...