AI CSS Animations

Gallery Focus Image Hover

Hover one photo in a row and it grows while its neighbours shrink, fade and lose their color. The :has() selector dims the siblings only while an item is hovered, not the gaps between them.

Also known as: dim other images on hover, has selector gallery hover, spotlight gallery item.

HTML

<div class="hfx-image-gallery-focus">
  <a href="#" class="hfx-image-gallery-focus-item" aria-label="Peaks"></a>
  <a href="#" class="hfx-image-gallery-focus-item" aria-label="Dusk"></a>
  <a href="#" class="hfx-image-gallery-focus-item" aria-label="Coast"></a>
  <a href="#" class="hfx-image-gallery-focus-item" aria-label="Night"></a>
</div>

CSS

.hfx-image-gallery-focus {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  gap: 0.5em;
}
.hfx-image-gallery-focus-item {
  width: 5em;
  height: 8em;
  border-radius: 0.6em;
  background-size: 13em 100%;
  background-position: 50% 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
}
.hfx-image-gallery-focus-item: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-gallery-focus-item: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-gallery-focus-item: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-gallery-focus-item: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-gallery-focus:has(.hfx-image-gallery-focus-item:is(:hover, :focus-visible)) .hfx-image-gallery-focus-item:not(:is(:hover, :focus-visible)) {
  opacity: 0.45;
  filter: grayscale(0.8);
  transform: scale(0.94);
}
.hfx-image-gallery-focus-item:is(:hover, :focus-visible) {
  transform: scale(1.08);
  box-shadow: 0 0.6em 1.2em -0.4em rgb(15 23 42 / 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .hfx-image-gallery-focus, .hfx-image-gallery-focus *, .hfx-image-gallery-focus::before, .hfx-image-gallery-focus::after, .hfx-image-gallery-focus *::before, .hfx-image-gallery-focus *::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