Text Image Button Layover Sample

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