Designing a custom image gallery with HTML, CSS, and JavaScript

Designing a custom image gallery with HTML, CSS, and JavaScript can be a great way to showcase your photography or artwork. In this tutorial, we will guide you through the process of creating a responsive image gallery that will look great on any device. We will be using HTML and CSS to create the structure and style of the gallery, and JavaScript to add interactivity and functionality.

Step 1: Setting up the HTML structure

First, we will create the HTML structure for our image gallery. We will start by creating a container div with a class of "gallery". Inside the container div, we will create a series of divs with a class of "image-wrapper". Each "image-wrapper" div will contain an image and a caption.

<div class="gallery">
  <div class="image-wrapper">
    <img src="path/to/image.jpg" alt="Image">
    <div class="caption">Caption</div>
  </div>
  <div class="image-wrapper">
    <img src="path/to/image.jpg" alt="Image">
    <div class="caption">Caption</div>
  </div>
  <div class="image-wrapper">
    <img src="path/to/image.jpg" alt="Image">
    <div class="caption">Caption</div>
  </div>
  ...
</div>

Step 2: Styling the HTML with CSS

Now that we have our HTML structure in place, we can start styling our image gallery with CSS. We will start by setting the dimensions of our images and centering them within their respective "image-wrapper" divs.

.gallery {
  display: flex;
  flex-wrap: wrap;
}

.image-wrapper {
  width: 25%;
  margin: 10px;
  position: relative;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

Next, we will style our caption divs to appear over the images when they are hovered over.

.image-wrapper .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  transform: translateY(100%);
}

.image-wrapper:hover .caption {
  transform: translateY(0);
}

Step 3: Adding JavaScript functionality

Now that our image gallery is styled, we can add JavaScript functionality to make it more interactive. We will start by creating an event listener that will toggle a class on our container div when the user clicks on an image. This class will be used to display a larger version of the image in a modal.

const gallery = document.querySelector('.gallery');
const images = document.querySelectorAll('.image-wrapper');
const modal = document.querySelector('.modal');
const modalImage = document.querySelector('.modal img');

images.forEach(image => {
  image.addEventListener('click', () => {
    gallery.classList.toggle('open');
    modalImage.src = image.querySelector('img').src;
  });
});

modal.addEventListener('click', () => {
  gallery.classList.toggle('open');
});

We will also create a modal that will display a larger version of the image when the user clicks on it. We will use JavaScript to set the source of the modal image to the source of the image that was clicked on.

<div class="modal">
  <div class="modal-content">
    <img src="" alt="Modal Image">
  </div>
</div>

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}

.modal img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

Step 4: Adding responsive design

Finally, we will add responsive design to our image gallery so that it looks great on any device. We will use media queries to adjust the size of our "image-wrapper" divs based on the size of the screen.

@media screen and (max-width: 768px) {
  .image-wrapper {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .image-wrapper {
    width: 100%;
  }
}

Conclusion

In this tutorial, we have walked through the process of creating a custom image gallery with HTML, CSS, and JavaScript. We started by setting up the HTML structure, then styled it with CSS to create a visually appealing gallery. Finally, we added JavaScript functionality to make it more interactive and responsive design to ensure it looks great on any device. With this knowledge, you can create your own custom image gallery to showcase your artwork or photography.