Logo
LiveChat

Loading..

Create a responsive art gallery with image popups using html css and js

Art Gallery

responsive and mobile friendly

Art Gallery With Popup

responsive and mobile friendly

Creating a responsive art gallery with images that pop up on click involves a combination of HTML, CSS, and JavaScript. Here's a step-by-step guide to help you achieve this:

Step 1: Set up your project structure Create a directory for your project and set up the following files:

  • index.html for your HTML structure.
  • styles.css for your CSS styling.
  • script.js for your JavaScript functionality.

Step 2: Create the HTML structure In your index.html file, create the basic HTML structure for your gallery. You can use a list (<ul>) or a grid layout (<div>) for your gallery. Here, we'll use an unordered list (<ul>).


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Create a responsive art gallery with image popups using html css and js | Assignment Hippo</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <script src="script.js" defer></script>
</head>
<body>
    <h2>Art gallery</h2>
    <div class="box">
      <div class="container">
        <header>
          <div class="item">
            <i class="uil uil-camera"></i>
            <span>Preview</span>
          </div>
          <div class="btn"><i class="close-icon uil uil-times"></i></div>
        </header>
        <div class="preview-img">
          <div class="img"><img src="" alt="preview-img"></div>
        </div>
      </div>
    </div>
    <section class="img-display">
      <ul class="images">
        <li class="img"><img src="footer4.jpg" alt="img"></li>
        <li class="img"><img src="netflix.jpg" alt="img"></li>
        <li class="img"><img src="fiverr.jpg" alt="img"></li>
        <li class="img"><img src="banner.jpg" alt="img"></li>
        <li class="img"><img src="footer4.jpg" alt="img"></li>
        <li class="img"><img src="netflix.jpg" alt="img"></li>
        <li class="img"><img src="fiverr.jpg" alt="img"></li>
        <li class="img"><img src="banner.jpg" alt="img"></li>
        <li class="img"><img src="footer4.jpg" alt="img"></li>
        <li class="img"><img src="netflix.jpg" alt="img"></li>
        <li class="img"><img src="fiverr.jpg" alt="img"></li>
        <li class="img"><img src="banner.jpg" alt="img"></li>
        <li class="img"><img src="footer4.jpg" alt="img"></li>
        <li class="img"><img src="netflix.jpg" alt="img"></li>
        <li class="img"><img src="fiverr.jpg" alt="img"></li>
        <li class="img"><img src="banner.jpg" alt="img"></li>
        <li class="img"><img src="footer4.jpg" alt="img"></li>
        <li class="img"><img src="netflix.jpg" alt="img"></li>
        <li class="img"><img src="fiverr.jpg" alt="img"></li>
        <li class="img"><img src="banner.jpg" alt="img"></li>
        
      </ul>
    </section>
  </body>
</html>

Step 3: Style your gallery In the styles.css file, style your gallery and modal (popup) to make them responsive and visually appealing:


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
h2 {
  text-align: center;
  margin-top: 51px;
  font-size: 3rem;
  color: #812147;
}
.img-display {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img-display .images {
  gap: 15px;
  max-width: 80%;
  margin: 40px 0;
  columns: 4 310px;
  list-style: none;
}
.img-display .images .img {
  display: flex;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  border-radius: 4px;
}
.img-display .images img {
  width: 100%;
  transition: transform 0.2s ease;
}

.img-display .images .img:hover img {
  transform: scale(1.1);
}
.box {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: fixed;
  visibility: hidden;
  background: rgba(0,0,0,0.65);
}
.box.show {
  visibility: visible;
}
.box .container {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100%;
  padding: 20px;
  max-width: 850px;
  background: #fff;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.1s ease;
}
.box.show .container {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.container :where(header, .item) {
  display: flex;
  align-items: center;
}
.container header {
  justify-content: space-between;
}
header .item i {
  font-size: 1.7rem;
}
header .item span {
  font-size: 1.2rem;
  margin-left: 10px;
}
header .btn i {
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: inline-block;
  color: #fff;
  margin-left: 10px;
  background: #f50742;
  font-size: 1.25rem;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  transition: 0.2s ease;
}
header .btn i:hover {
  background: #e81d1d;
}
.container .preview-img {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.preview-img .img {
  max-height: 65vh;
}
.preview-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 688px) {
  .box .container {
    padding: 12px;
    max-width: calc(100% - 26px);
  }
  .container .preview-img {
    margin-top: 15px;
  }
  .img-display .images {
    max-width: 100%;
    padding: 0 13px;
    margin-top: 20px;
  }
}

Step 4: Create JavaScript functionality In the script.js file, add JavaScript code to handle the click events and show/hide the modal:


     const allImages = document.querySelectorAll(".images .img");
     const box = document.querySelector(".box");
     const closeImgBtn = box.querySelector(".close-icon");
     
     allImages.forEach(img => {
     
         img.addEventListener("click", () => showbox(img.querySelector("img").src));
     });
     
     const showbox = (img) => {
     
         box.querySelector("img").src = img;
         box.classList.add("show");
         document.body.style.overflow = "hidden";
     }
     
     closeImgBtn.addEventListener("click", () => {
     
         box.classList.remove("show");
         document.body.style.overflow = "auto";
     });

Step 5: Add images to your project Place your artwork images (e.g., image1.jpg, image2.jpg, etc.) in the same directory as your HTML file.

Step 6: Test your gallery Open the index.html file in a web browser to test your responsive art gallery. Click on an image to see it pop up in the modal, and use the close button or click outside the modal to close it.

Congratulations! You've created a responsive art gallery with image popups using HTML, CSS, and JavaScript. You can expand and customize this gallery further to meet your specific requirements.