AI CSS Animations

Expanding Gallery Image Hover

Four photo strips share a row and the hovered one widens to take most of it while a label fades in. The strips animate flex-grow and keep a fixed background size, so each widens like a window.

Also known as: accordion image gallery, expanding cards hover, flex grow gallery.

Peaks Dusk Coast Night

HTML

<div class="hfx-image-accordion-gallery">
  <a href="#" class="hfx-image-accordion-gallery-panel"><span>Peaks</span></a>
  <a href="#" class="hfx-image-accordion-gallery-panel"><span>Dusk</span></a>
  <a href="#" class="hfx-image-accordion-gallery-panel"><span>Coast</span></a>
  <a href="#" class="hfx-image-accordion-gallery-panel"><span>Night</span></a>
</div>

CSS

.hfx-image-accordion-gallery {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  gap: 0.35em;
  width: 22em;
  height: 9.5em;
  font-family: system-ui, sans-serif;
}
.hfx-image-accordion-gallery-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 0.6em;
  overflow: hidden;
  background-size: 16em 100%;
  background-position: 50% 0;
  color: #fff;
  text-decoration: none;
  transition: flex-grow 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.hfx-image-accordion-gallery-panel:nth-child(1) {
  background-image:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
}
.hfx-image-accordion-gallery-panel:nth-child(2) {
  background-image:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
}
.hfx-image-accordion-gallery-panel:nth-child(3) {
  background-image:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
}
.hfx-image-accordion-gallery-panel:nth-child(4) {
  background-image:
    radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
    radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
    conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
    conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
    linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
}
.hfx-image-accordion-gallery-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, rgb(2 6 23 / 0.6));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hfx-image-accordion-gallery-panel span {
  position: absolute;
  z-index: 1;
  left: 0.8em;
  bottom: 0.7em;
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-accordion-gallery-panel:is(:hover, :focus-visible) {
  flex-grow: 4;
}
.hfx-image-accordion-gallery-panel:is(:hover, :focus-visible)::after {
  opacity: 1;
}
.hfx-image-accordion-gallery-panel:is(:hover, :focus-visible) span {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .hfx-image-accordion-gallery, .hfx-image-accordion-gallery *, .hfx-image-accordion-gallery::before, .hfx-image-accordion-gallery::after, .hfx-image-accordion-gallery *::before, .hfx-image-accordion-gallery *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --hfx-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --hfx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar hover effects

Image Zoom Card
Caption Reveal Card
Content Rise Card
Grayscale to Color Image