Habt ihr euch auch schon mal gefragt wie man es hinbekommt, dass man ein Element (Bild hier) das vor und das danach positioniert ist auch noch manipulieren kann?

Im heutigen Blogbeitrag zeige ich euch wie das geht. Ihr könnt so aus einer Reihe von Bilder eines mit der Maus auswählen / hovern und ihr seht wie das Bild davor und das danach ebenfalls reagiert.

Das kann man dann nicht nur für Bilder verwenden, sondern für alle Element innerhalb einer Webseite.

Diesen Trick kann man also nicht nur für Bilder verwenden, sondern für alle Elemente die nacheinander positioniert sind.

Ein echt nützlicher Trick

Video

HTML

<div class="container">
      <div class="gallery">
        <img src="bild1.jpg" class="item" />
        <img src="bild2.jpg" class="item" />
        <img src="bild3.jpg" class="item" />
        <img src="bild4.jpg" class="item" />
        <img src="bild5.jpg" class="item" />
        <img src="bild6.jpg" class="item" />
      </div>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #ffcdad;
}

.gallery {
  display: flex;
  flex-direction: row;
}

.gallery .item {
  width: 220px;
  height: 220px;
  object-fit: cover;
  transition: transform 0.3s ease, z-index 0s;
  position: relative;
  z-index: 1;
}
.gallery .item:hover {
  transform: scale(1.5);
  z-index: 5;
}

.gallery .item:hover + .item,
.gallery .item:has(+ .item:hover) {
  transform: scale(1.2);
  z-index: 3;
}