CSS - Image Gallery

Welcome, aspiring web designers! Today, we're diving into the exciting world of CSS Image Galleries. As your friendly neighborhood computer teacher, I'm thrilled to guide you through this journey. Let's transform those boring static images into eye-catching, interactive galleries that will make your websites pop!

CSS - Image Gallery

Simple Image Gallery

Let's start with the basics. A simple image gallery is like arranging photos on your wall – it's all about presentation. Here's how we can create one using CSS:

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery img {
  width: 200px;
  height: 200px;
  margin: 10px;
  object-fit: cover;
}

In this example, we're using flexbox to create a responsive layout. The flex-wrap: wrap property ensures our images will wrap to the next line if there's not enough space. justify-content: center centers our images horizontally.

Image Gallery With a Hover Effect

Now, let's add some interactivity! Hover effects can make your gallery more engaging. It's like adding a secret message that only appears when you look closely.

<div class="gallery">
  <div class="image-container">
    <img src="image1.jpg" alt="Image 1">
    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
  <!-- Repeat for other images -->
</div>

.image-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

This CSS creates an overlay that appears when you hover over an image. The transition property gives it a smooth fade-in effect.

Responsive Image Gallery Using Media Query

In today's multi-device world, responsiveness is key. Let's make our gallery adapt to different screen sizes:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

@media screen and (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 400px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

This CSS uses CSS Grid to create a responsive layout. The minmax function ensures our images are at least 200px wide, but can grow larger if space allows. The media queries adjust the layout for smaller screens.

Syntax

Let's take a moment to understand the syntax we've been using. CSS properties follow this structure:

selector {
  property: value;
}

Here's a table of common CSS properties used in image galleries:

Property	Description	Example
display	Specifies the display behavior	`display: flex;`
width	Sets the width of an element	`width: 200px;`
height	Sets the height of an element	`height: 200px;`
margin	Sets the margins of an element	`margin: 10px;`
object-fit	Specifies how an image should be resized	`object-fit: cover;`
position	Specifies the type of positioning method used	`position: relative;`
opacity	Sets the opacity level for an element	`opacity: 0;`
transition	Specifies the transition effect	`transition: .5s ease;`

CSS Image Gallery With Horizontal Scroll

Sometimes, you want your gallery to scroll horizontally. It's like a photo reel you can swipe through:

<div class="gallery-container">
  <div class="gallery-scroll">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <!-- Add more images as needed -->
  </div>
</div>

.gallery-container {
  width: 100%;
  overflow-x: auto;
}

.gallery-scroll {
  display: flex;
  width: max-content;
}

.gallery-scroll img {
  width: 200px;
  height: 200px;
  margin-right: 10px;
  object-fit: cover;
}

This CSS creates a horizontally scrolling gallery. The overflow-x: auto property adds a horizontal scrollbar when needed.

CSS Image Gallery With Vertical Scroll

Vertical scrolling galleries are great for showcasing a large number of images in a compact space:

<div class="gallery-vertical">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <!-- Add more images as needed -->
</div>

.gallery-vertical {
  height: 400px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-vertical img {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
  object-fit: cover;
}

This CSS creates a vertically scrolling gallery. The overflow-y: scroll property adds a vertical scrollbar.

CSS Grid Image Gallery

CSS Grid is a powerful tool for creating complex layouts. Let's use it to create a dynamic image gallery:

<div class="grid-gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
</div>

.grid-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.grid-gallery img:nth-child(4) {
  grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
  grid-row: span 2;
}

This CSS creates a grid layout where some images span multiple columns or rows, creating a more dynamic layout.

CSS Tabbed Image Gallery

Tabbed galleries are a great way to organize different sets of images:

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'Nature')">Nature</button>
  <button class="tablinks" onclick="openTab(event, 'City')">City</button>
</div>

<div id="Nature" class="tabcontent">
  <img src="nature1.jpg" alt="Nature 1">
  <img src="nature2.jpg" alt="Nature 2">
</div>

<div id="City" class="tabcontent">
  <img src="city1.jpg" alt="City 1">
  <img src="city2.jpg" alt="City 2">
</div>

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

This CSS creates a tabbed interface. You'll need some JavaScript to make it functional:

function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

CSS Slideshow

Let's create a simple slideshow:

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="img1.jpg" style="width:100%">
  </div>
  <div class="mySlides fade">
    <img src="img2.jpg" style="width:100%">
  </div>
  <div class="mySlides fade">
    <img src="img3.jpg" style="width:100%">
  </div>
</div>

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

You'll need some JavaScript to control the slideshow:

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  slides[slideIndex-1].style.display = "block";  
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

CSS Slideshow Gallery

Finally, let's combine our slideshow with thumbnails for a more interactive experience:

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="img1.jpg" style="width:100%">
  </div>
  <div class="mySlides fade">
    <img src="img2.jpg" style="width:100%">
  </div>
  <div class="mySlides fade">
    <img src="img3.jpg" style="width:100%">
  </div>
</div>

<div class="row">
  <div class="column">
    <img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
  </div>
  <div class="column">
    <img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
  </div>
  <div class="column">
    <img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
  </div>
</div>

.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

You'll need to modify the JavaScript to handle thumbnail clicks:

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}

And there you have it! We've covered a wide range of CSS image gallery techniques. Remember, practice makes perfect. Try combining these techniques to create your own unique galleries. Happy coding!

Credits: Image by storyset