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