Esperimento

Galleria immagini in CSS

Passa il mouse su un’immagine: tutte le altre si ritraggono. Nessuna riga di JavaScript, solo il selettore :has().

HTML

<div class="image-gallery">
  <div><img src="…" alt="" /></div>
  <div><img src="…" alt="" /></div>
  <div><img src="…" alt="" /></div>
  <!-- … -->
</div>

CSS

.image-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 36rem;
  margin-inline: auto;
}

.image-gallery div {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.image-gallery img {
  transition: scale 350ms ease, opacity 350ms linear;
}

/* Il contenitore reagisce all'hover di una qualsiasi immagine. */
.image-gallery:has(img:hover) img:not(:hover) {
  scale: 0.8;
  opacity: 0.5;
}