Wie kann ich beim Schweben einen Bildzoomeffekt nur mit der CSS3-Transformation erstellen?

CSS-Bildzoomeffekt beim Hover mit CSS3-Transformation

Mit der Transformationseigenschaft von CSS3 lässt sich mühelos ein Hovereffekt erstellen, der in ein Bild hineinzoomt . Dieser Ansatz erfordert nur minimalen Code und bietet eine elegante visuelle Verbesserung, ohne dass komplexe Tabellen oder Maskendivs erforderlich sind.

Implementierung

Um den Zoomeffekt zu erstellen, befolgen Sie diese Schritte:

1. HTML: Platzieren Sie das Bild in einem Container Element.

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Your image">
    </div>
</div>

2. CSS: Wenden Sie die CSS-Stile an, um den Bildzoom zu steuern.

.thumbnail {
    width: 320px;
    height: 240px;
}

.image {
    width: 100%;
    height: 100%;
}

.image img {
    transition: all 1s ease;
}

.image:hover img {
    transform: scale(1.25);
}

• Die Eigenschaft „transition“ definiert die Dauer und die Beschleunigungsfunktion des Skalierungseffekts.
• Die Eigenschaft „transform: scale()“ skaliert das Bild, wenn der Cursor über dem Container schwebt.

Beispiel

Siehe die folgende Beispielgeige: https://jsfiddle.net/rkd3x4uc/

Hinweis:

• Die Zoom-Eigenschaft, die Wendet den Zoom direkt auf ein Bild an, wird nur im Internet Explorer unterstützt. Die Eigenschaft transform:scale() wird aus Gründen der browserübergreifenden Kompatibilität bevorzugt.
• Um das skalierte Bild innerhalb der Grenzen des Containers einzuschränken, können Sie overflow:hide zur .image-Klasse hinzufügen.

Das obige ist der detaillierte Inhalt vonWie kann ich beim Schweben einen Bildzoomeffekt nur mit der CSS3-Transformation erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!