body {
font-family: Arial, Helvetica, sans-serif;
padding: 70px
}
.overlay-fade,
.overlay-slide {
position: relative;
box-sizing: border-box;
height: 280px;
width: 220px;
overflow: hidden;
float: left;
margin: 10px;
}
.overlay-fade:hover div {
opacity: 1;
transition: all 0.2s ease-in;
}
.overlay-fade div {
position: absolute;
box-sizing: border-box;
top: 0;
background-color: rgba(255,255,255,0.3);
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.2s ease-in;
}
.overlay-fade a {
box-sizing: border-box;
text-decoration: none;
display: block;
color: #eeeeee;
background-color: #1c5bb1;
text-align: center;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 130px;
height: 50px;
line-height: 50px;
position: absolute;
font-size: 12px;
font-weight: bold;
}
.overlay-slide:hover div {
transform: translate(0, 0);
transition: all 0.2s ease-in;
}
.overlay-slide div {
position: absolute;
box-sizing: border-box;
bottom: 0;
transform: translate(0, 100%);
padding: 15px;
background-color: rgba(0,0,0,0.5);
text-align:center;
transition: all 0.2s ease-in;
}
.overlay-slide h2 {
margin: 0;
font-size: 18px;
color: #eeeeee;
}
.overlay-slide p {
font-size: 14px;
color: #dddddd;
}