overlay
slidein-bottom


/* Slide in Overlay from the Bottom */
.slidein-bottom {
position: relative;
width: 100%; /* slidein-bottom width */
/* base image */
.image {
display: block;
width: 100%;
height: auto;
}
/* overlay setting */
.overlay {
position: absolute;
bottom: 0;
right: 0;
background-color: #363b3b;
opacity: 0.8;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
color: white;
}
.text-block {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
opacity: 1;
background-color: #1b1b1b;
}
}
/* hover overlay hight */
.slidein-bottom:hover .overlay {
height: 40%;
}
/* hover overlay hight */
.slidein-bottom:hover .overlay {
height: 40%;
}