Zooming Background Images

Der folgende Beitrag ist ein Gastbeitrag von Dylan Winn-Brown, der uns eine performante Methode zeigt, um diesen Designeffekt zu erzielen.

Als ich kürzlich an der Website eines Kunden arbeitete, wurde ich gebeten, einen Effekt wie diesen zu replizieren.

Diese Art von Effekt wird vor allem in Portfoliosituationen eingesetzt, in denen das Design sowohl visuelle als auch informative Details zeigen soll.

Es gibt viele verschiedene mögliche Methoden

Da ich noch nie einen solchen Effekt erstellt hatte, begann ich, mir verschiedene Möglichkeiten anzusehen und stieß auf eine Reihe von verschiedenen Methoden.

Eine Option war die Verwendung eines jQuery Plugins. Dieses entsprach nicht ganz dem Effekt, den ich suchte, und war sicherlich nicht sehr leichtgewichtig.

Eine weitere Option war, ein <img> innerhalb des Containers zu positionieren und es mit CSS zu manipulieren. Hier könnten einige Vorteile liegen, wie z. B. die Möglichkeit, die Quelle mit srcset festzulegen, damit das verwendete Bild leistungs- und gerätegerecht ist.

In meiner Situation wollte ich den Effekt komplett in CSS verwalten, also habe ich mich dafür entschieden.

Grundlegende Funktionalität

Um eine optimale Leistung zu erzielen, habe ich mich entschieden, die CSS-Eigenschaft transform für die Vergrößerung des Bildes zu verwenden. (CSS-Animationen profitieren von Hardwarebeschleunigung und erscheinen daher flüssiger als andere Animationsmethoden.)

Anstelle eines <img> habe ich ein zusätzliches <div> innerhalb des Elternelements verwendet, das als Bild fungiert. Die Struktur ist wie folgt:

<div class="parent">
  <div class="child"></div>
</div>

Zuerst legen wir die Abmessungen für das Elternelement fest. Dann kann das Kindelement das Elternelement mit width: 100% und height: 100%; füllen und das Hintergrundbild festlegen, sodass es sich abdeckt.

.parent {
  width: 400px; 
  height: 300px;
}

.child {
  width: 100%;
  height: 100%;
  background-color: black; /* fallback color */
  background-image: url("images/city.jpg");
  background-position: center;
  background-size: cover;
}

Anschließend fügen wir Hover-Effekte zu unserem Elternelement hinzu, die sich auf unser Kindelement auswirken. Ein Fokusstil ist auch gut für die Zugänglichkeit.

.parent:hover .child,
.parent:focus .child {
  transform: scale(1.2);
}

Sie möchten möglicherweise ein Tool zur Hinzufügung von Präfixen für die bestmögliche Browserunterstützung verwenden.

Um den grundlegenden Effekt zu vervollständigen, können wir unserem normalen Zustand des Kindelements einige Übergänge hinzufügen.

transition: all .5s;

Wenn Sie eine Farbüberlagerung hinzufügen möchten, können Sie Pseudoelemente wie ::before verwenden.

.child::before {
  content: "";
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(52, 73, 94, 0.75);
}

.parent:hover .child:before,
.parent:focus .child:before {
  display: block;
}

Wenn wir nun mit der Maus über das Elternelement fahren, sollte das Kindelement eine Farbüberlagerung anzeigen!

Schließlich behandeln wir, wie man etwas Text hinzufügt, der auf unserer Überlagerung angezeigt werden soll. Wir können ein Element zu unserem aktuellen Kindelement hinzufügen, wie folgt:

<div class="parent">
   <div class="child">
      <span>Hello</span>
   </div>
</div>

Wir können unserem <span> etwas Stil verleihen.

span {
  color: white; /* Good thing we set a fallback color! */
  font-family: sans-serif;
  padding: 25%;
  position: absolute;
}

und wir können es nur sichtbar machen, wenn wir mit der Maus über .parent fahren.

.parent:hover span,
.parent:focus span {
  display: block;
}

Live-Demo

Siehe den Pen Image zoom on hover – portfolio websites von Dylan (@dwinnbrown) auf CodePen.

Mobile Unterstützung

Wenn die Container Links sind und die Hover-Zustände keine wesentlichen Informationen preisgeben, können Sie sie auch so belassen.

Wenn die Hover-Zustände wichtig sind und damit dies auf Touchscreens funktioniert, können wir leere onclick="" Handler auf unseren .parent Containern verwenden. Leider konnte ich keine andere Möglichkeit finden, dies zu tun, aber wenn Ihnen eine einfällt, lassen Sie es mich in den Kommentaren wissen!