Text Image Button Layover Sample


Lovely nature!

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

Read more

Code:

Lovely nature!

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

Read more
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;
}