Das Folgende ist ein Gastbeitrag von Dylan Winn-Brown, der uns einen performanten Weg zeigt, um diesen Designeffekt zu erzielen.

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

Diese Art von Effekt wird insbesondere in Portfolio-Situationen verwendet, in denen das Design sowohl visuelle als auch informative Details zeigen soll.

Es gibt viele verschiedene mögliche Methoden

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

Eine Möglichkeit war die Verwendung eines jQuery-Plugins. Dieser war nicht ganz der Effekt, den ich suchte, und schon gar nicht sehr leicht.

Eine weitere Möglichkeit bestand darin, ein <img> innerhalb des Containers zu positionieren und mit CSS zu manipulieren. Hier könnte es einige potenzielle Vorteile geben, z. B. die Möglichkeit, die Quelle mit srcset so festzulegen, dass das verwendete Bild leistungs- und gerätegerecht ist.

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

Grundfunktionalität

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

Anstelle einer <img> habe ich eine zusätzliche <div> innerhalb des übergeordneten Elements verwendet, um als Bild zu fungieren. Die Struktur ist:

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

Zuerst geben wir die Abmessungen für das übergeordnete Element an. Dann kann das Kind das übergeordnete Element mit width: 100% und height: 100%; füllen und das Hintergrundbild festlegen, um sicherzustellen, dass es skaliert, um den Bereich abzudecken.

.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;}

Wir fügen dann unserem übergeordneten Element Hover-Effekte hinzu, die sich auf unser untergeordnetes Element auswirken. Ein Fokusstil ist auch gut für die Barrierefreiheit:

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

Möglicherweise möchten Sie ein Tool zum Hinzufügen von Präfixen verwenden, um die bestmögliche Browserunterstützung zu erzielen.

Um den Basiseffekt zu beenden, können wir dem Normalzustand unseres untergeordneten Elements einige Übergänge hinzufügen:

transition: all .5s;

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

.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 übergeordnete Element fahren, sollte das untergeordnete Element eine Farbüberlagerung anzeigen!

Schließlich werden wir behandeln, wie Sie Text hinzufügen, um ihn in unserem Overlay anzuzeigen. Wir können unserem aktuellen untergeordneten Element ein Element wie folgt hinzufügen:

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

Wir können unserem <span> einen Stil geben:

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 das .parent:

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

Live–Demo

Siehe den Stift Bild Zoom auf Hover – Portfolio-Websites von Dylan (@dwinnbrown) auf CodePen.

Mobile Unterstützung

Wenn die Container Links sind und die Hover-Zustände keine wesentlichen Informationen enthalten, können Sie sie einfach in Ruhe lassen.