Sun Jun 02 2024

Creative and Stunning Image Gallery

File Name: creative-image-gallery.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Creative Gallery</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background-color: #212121;
      }

      .container {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
      }

      aside#bigImg {
        width: 100%;
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      aside#bigImg img {
        width: auto;
        height: 350px;
        border-radius: 8px;
        filter: drop-shadow(0 5px 10px #afafaf7a);
      }

      ul#imgList {
        list-style: none;
        width: 100%;
        display: flex;
        gap: 15px;
        justify-content: center;
      }

      ul#imgList li {
        width: 100px;
        height: 150px;
      }

      ul#imgList li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        cursor: pointer;
        transition: 0.3s all ease-in-out;
      }

      ul#imgList:hover li img {
        filter: grayscale(100%) blur(1px);
      }
      ul#imgList:hover li:hover img {
        filter: grayscale(0%) blur(0);
        transform: translateY(-10%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <aside id="bigImg"></aside>
      <ul id="imgList"></ul>
    </div>
    <script>
      const imgList = [
        "https://cdn.pixabay.com/photo/2019/06/22/05/29/woman-4290853_960_720.jpg",
        "https://cdn.pixabay.com/photo/2020/12/13/16/37/woman-5828786_960_720.jpg",
        "https://cdn.pixabay.com/photo/2020/01/17/16/26/portrait-4773351_960_720.jpg",
        "https://cdn.pixabay.com/photo/2016/01/15/08/02/girl-1141279_960_720.jpg",
        "https://cdn.pixabay.com/photo/2018/02/14/21/45/woman-3153999_960_720.jpg",
      ];

      const bigImg = document.getElementById("bigImg");
      const ulList = document.getElementById("imgList");

      const listImages = () => {
        imgList.forEach((img, index) => {
          const newList = document.createElement("li");
          const nImg = new Image();
          nImg.src = img;
          nImg.addEventListener("click", () => {
            selectedImg(index);
          });
          newList.appendChild(nImg);
          ulList.appendChild(newList);
        });
      };

      const selectedImg = (pos) => {
        const bImg = new Image();
        bImg.src = imgList[pos];
        while (bigImg.firstChild) {
          bigImg.removeChild(bigImg.firstChild);
        }

        bigImg.appendChild(bImg);
      };

      listImages();
      selectedImg(0);
    </script>
  </body>
</html>

Author:Geekboots