<div class="works_container">
<div class="works_main" onclick="#">
<div>
<img src="https://search.pstatic.net/common?quality=75&direct=true&src=https%3A%2F%2Fmovie-phinf.pstatic.net%2F20211108_295%2F1636363035383sHbbs_JPEG%2Fmovie_image.jpg" alt="Work Photo">
</div>
<p>강릉</p>
</div>
</div>
.works_container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.works_main {
position: relative;
}
.works_main div {
width: 230px;
height: 331px;
overflow: hidden;
display: inline-block;
}
.works_main img {
width: 100%;
height: 100%;
transition: transform 1s ease-in-out, filter 1s ease-in-out;
}
.works_main:hover img {
transform: scale(1.2);
transform-origin: center;
filter: brightness(10%);
transition: transform 1s ease-in-out, filter 1s ease-in-out;
}
.works_main p {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
font-size: 1.5rem;
font-weight: bold;
color: #fff;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.works_main:hover p {
opacity: 1;
transition: opacity 1s ease-in-out;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.