<div class="works_container">
<div class="works_main">
<div class="works_front">강릉</div>
</div>
</div>
.works_container {
position: relative;
z-index: 1;
width: 230px;
height: 331px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
background: url("https://search.pstatic.net/common?quality=75&direct=true&src=https%3A%2F%2Fmovie-phinf.pstatic.net%2F20211108_295%2F1636363035383sHbbs_JPEG%2Fmovie_image.jpg");
background-size: cover;
overflow: hidden;
}
.works_container::before,
.works_container::after {
content: '';
position: absolute;
left: 0;
z-index: -1;
width: 230px;
height: 331px;
background-color: #000;
transition: transform 1s 0.2s;
}
.works_container::before {
top: 0;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0% 100%);
transform: translateY(-100%);
}
.works_container::after {
bottom: -1px;
clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
transform: translateY(100%);
}
.works_container:hover::before,
.works_container:hover::after {
transform: translateY(0);
}
.works_main {
opacity: 0;
transition: opacity 0.5s;
}
.works_front {
font-size: 1.5rem;
font-weight: bold;
color: #fff;
}
.works_container:hover .works_main {
opacity: 1;
transition-delay: 0.7s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.