CSS Image Gallery

An image gallery is a great way to showcase a collection of images on a website in an organized and visually appealing manner. In this tutorial, we will learn how to create a simple CSS image gallery using HTML and CSS.

Step 1: Create the HTML Structure

First, let's create the basic HTML structure for our image gallery. We will use an unordered list (<ul>) to hold our images.

<div class="image-gallery">
  <ul>
    <li><img src="../../images/Logo_BluecodeAcademy_horizontal.png" alt="Image 1"></li>
    <li><img src="../../images/Logo_BluecodeAcademy_horizontal.png" alt="Image 2"></li>
    <li><img src="../../images/Logo_BluecodeAcademy_horizontal.png" alt="Image 3"></li>
  </ul>
</div>

Step 2: Style the Image Gallery with CSS

Next, we will use CSS to style our image gallery. We will set the list items to display inline-block and add some margin and padding for spacing.

.image-gallery {
  text-align: center;
}

.image-gallery ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.image-gallery li {
  display: inline-block;
  margin: 10px;
}

Step 3: Add Hover Effects

Let's add some hover effects to make our image gallery more interactive. We will change the opacity of the images when the user hovers over them.

.image-gallery img {
  transition: opacity 0.3s;
}

.image-gallery img:hover {
  opacity: 0.7;
}

Step 4: Make the Gallery Responsive

Lastly, we will make our image gallery responsive by using CSS media queries to adjust the styling based on the screen size.

@media screen and (max-width: 600px) {
  .image-gallery li {
    display: block;
  }
}

Final HTML and CSS Code

Here is the final code for our CSS image gallery:

.image-gallery {
  text-align: center;
}

.image-gallery ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.image-gallery li {
  display: inline-block;
  margin: 10px;
}

.image-gallery img {
  transition: opacity 0.3s;
}

.image-gallery img:hover {
  opacity: 0.7;
}

@media screen and (max-width: 600px) {
  .image-gallery li {
    display: block;
  }
}