Text Image Button Layover Sample

Why give out your phone number to anyone when you can give out your virtual number to everyone! Try Call Me Private today!

<figure>
<div>
<img src=\"http://enpundit.s3.amazonaws.com/wp-content/uploads/2011/11/nature-design-china.jpg\"/>
<figcaption>
<h2>Lovely nature!</h2>
<p>Lorem ispum bacon love candy lollypop baking soda! Just what he needs.</p>
<a href=\"http://mypost.io/post/text-image-button-layover-sample#\" class=\"readmoreBtn\">Read more</a>
</figcaption>
</div>
 </figure>

body {
background: rgba(44, 62, 80,1.0);
color: #fff;
font-family: sans-serif;
 }
 
 figure
 {
width: 600px;
height: 320px;
margin: auto;
background: #fff;
overflow: hidden;
position: relative;
 }
 
 figure div
 {
display: block;
width: 600px;
height: 320px;
position: relative;
 }
 
 figure div figcaption
 {
position: absolute;
width: 600px;
height: 320px;
background: rgba(52, 73, 94, 0.6);
z-index: 2;
bottom: -320px;
text-align: center;
font-size: 1.5em;
box-sizing: border-box;
transition: all 0.25s ease-in-out;
 }
 
 figcaption h2
 {
margin-top: 55px;
 }
 
 figure:hover div figcaption
 {
bottom: 0;
 }
 
 .readmoreBtn
 {
color: #fff;
text-decoration: none;
background-color: #2ecc71;
padding: 15px 50px 15px 50px;
box-shadow: #27ae60 0px 10px;
 }
 
 .readmoreBtn:hover
 {
background-color: #27ae60;
 }