How I Built This CSS Hover Gallery with a Scrollable Inline Layout

In 2025, creating visually appealing UI interactions with zero frameworks is back in style. One great example? A hover-powered horizontal gallery that looks stunning on any landing page, portfolio, or showcase section.

In this post, I’ll show you how I built a CSS + JS image gallery that features:

• Horizontal scroll (inline layout)
• Smooth hover animations
• Dimmed background focus
• Zero dependencies — just HTML, CSS, and JS

Let’s break it down.

1. HTML Structure for the Scrollable Inline Gallery

This gallery is structured with .card containers inside a .gallery-wrapper. Each card holds a Freepik image.

<div class="gallery-wrapper" id="gallery">
  <div class="card"><img src="your-image.jpg" alt="Image 1"></div>
  <div class="card"><img src="your-image.jpg" alt="Image 2"></div>
  <!-- Add as many as needed -->
</div>

✅ Use flex-shrink: 0 to make the cards stay inline and scroll horizontally.

2. CSS Styling with Hover Scaling + Dim Effect

This is where the real magic happens. The hovering effect dims non-focused cards and scales up the one you’re hovering over.

.gallery-wrapper {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 40px;
  justify-content: center;
  align-items: center;
}

.card {
  width: 220px;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease, opacity 0.3s ease;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-wrapper.hovering .card:not(.hovered) {
  opacity: 0.3;
}

.card.hovered {
  transform: scale(1.08);
  z-index: 2;
}

✅ This gives a modern “teaser” effect — minimal but impressive.

3. JavaScript for Interaction Logic

We use simple JS to add and remove the hover classes dynamically.

const gallery = document.getElementById("gallery");
const cards = gallery.querySelectorAll(".card");

cards.forEach(card => {
  card.addEventListener("mouseenter", () => {
    gallery.classList.add("hovering");
    card.classList.add("hovered");
  });

  card.addEventListener("mouseleave", () => {
    gallery.classList.remove("hovering");
    card.classList.remove("hovered");
  });
});

✅ It’s lightweight and doesn’t interfere with performance or layout.

4. Scrollbar Styling for a Clean Look (Optional)

You can also customize the scrollbar for better branding:

.gallery-wrapper::-webkit-scrollbar {
  height: 6px;
}

.gallery-wrapper::-webkit-scrollbar-thumb {
  background: #3447AA;
  border-radius: 3px;
}

.gallery-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

✅ This adds a polished finish, especially on desktop.

Final Words

This gallery setup is ideal for developers who want a clean, high-impact UI with no extra libraries. It’s perfect for landing pages, showcase sections, or even product teasers.

Feel free to customize the card sizes, padding, or hover scale to match your brand.