See the Pen 들어오는(슬라이드) 카드 by nilgi (@nilgi) on CodePen.
.box {
position: relative;
width: 100%;
}
.im1 {
display: block;
width: 100%;
height: auto;
}
.card1 {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background: tomato;
width: 100%;
height: 0;
overflow: hidden;
transition: 1s;
}
.box:hover .card1 {
bottom: 0;
height: 100%;
}
.card2 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: tomato;
width: 100%;
height: 0;
overflow: hidden;
transition: 1s;
}
.box:hover .card2 {
height: 100%;
}
.card3 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: tomato;
width: 0;
height: 100%;
overflow: hidden;
transition: 1s;
}
.box:hover .card3 {
width: 100%;
}
.card4 {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background: tomato;
width: 0;
height: 100%;
overflow: hidden;
transition: 1s;
}
.box:hover .card4 {
width: 100%;
left: 0;
}
.text {
white-space: nowrap;
color: #fff;
font-size: 30px;
font-weight: bold;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}