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!


Lovely nature!

Lorem ispum bacon love candy lollypop baking soda! Just what he needs.

Read more

Code:
<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>
CSS:
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;
}