<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #27 - The Gallery Clicker</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="all-imgs">
        <img src="https://cdn.pixabay.com/photo/2022/01/10/16/18/sea-arch-6928714_960_720.jpg" />
        <img src="https://cdn.pixabay.com/photo/2014/12/16/22/25/woman-570883_960_720.jpg" />
        <img src="https://cdn.pixabay.com/photo/2015/04/23/21/59/tree-736877_960_720.jpg" />
        <img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/pink-324175_960_720.jpg" />
        <img src="https://cdn.pixabay.com/photo/2015/10/09/00/55/lotus-978659_960_720.jpg" />
      </div>

      <div class="preview-img">
        <img src="https://cdn.pixabay.com/photo/2022/01/10/16/18/sea-arch-6928714_960_720.jpg" class="current-img" />
      </div>

      <div class="all-imgs">
        <img src="https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_960_720.jpg" />
        <img src="https://cdn.pixabay.com/photo/2013/08/22/19/18/flowers-174817_960_720.jpg" />
        <img src="https://cdn.pixabay.com/photo/2014/09/14/18/04/dandelion-445228_960_720.jpg" />
        <img src="https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_960_720.jpg" />
        <img src="https://cdn.pixabay.com/photo/2015/01/08/18/27/startup-593341_960_720.jpg" />
      </div>
    </div>

    <!-- --------------------------- -->
    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  justify-content: space-between;
}

.all-imgs {
  display: flex;
  flex-direction: column;
}

.all-imgs img {
  height: 20vh;
  width: 200px;
  object-fit: cover;
  cursor: pointer;
}

.preview-img {
  height: 100vh;
}

.current-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.animate-imgs {
  opacity: 0.5;
  animation: animate-imgs 0.4s ease-in-out forwards;
}

@keyframes animate-imgs {
  100% {
    opacity: 1;
  }
}

const currentImg = document.querySelector(".current-img");
const imgs = document.querySelectorAll(".all-imgs img");

imgs.forEach(function (img) {
  img.addEventListener("click", function (e) {
    //클릭한 이미지를 현재 이미지에 할당
    currentImg.src = e.target.src;
    //CSS의 애니메이션 할당.
    currentImg.classList.add("animate-imgs");
    setTimeout(function () {
      currentImg.classList.remove("animate-imgs");
    }, 400);
    //일정 시간후에 애니메이션 종료.
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.