<div class="works_container">
  <div class="works_main">
    <div class="works_front">
      <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>
    <div class="works_back">
      <p>강릉</p>
    </div>
  </div>
</div>
.works_container {
  width: 230px;
  height: 331px;
  margin: 0 auto;
}

.works_main {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.works_container:hover .works_main {
  transform: rotateY(180deg);
}

.works_front img {
  position: absolute;
  backface-visibility: hidden;
  width: 230px;
  height: 331px;
}

.works_back {
  position: absolute;
  backface-visibility: hidden;
  width: 230px;
  height: 331px;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  transform: rotateY(180deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.