Wie erstelle ich mit CSS einen Bildzoomeffekt beim Schweben?

Zoomeffekt auf Bilder beim Bewegen der Maus mit CSS

In der Webentwicklung ist das Anwenden eines Zoomeffekts auf Bilder beim Bewegen der Maus ein häufiges Designelement. Lassen Sie uns eine Lösung mithilfe der CSS3-Transformation untersuchen.

CSS3-Transformation für Zoomeffekt

Die CSS3-Transformationseigenschaft und die Scale()-Funktion ermöglichen Zoomeffekte auf Bilder. Hier ist ein Codeausschnitt:

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="image.jpg" alt="Image">
    </div>
</div>

CSS:

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

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

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

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

In diesem Beispiel die image div enthält das Bild. Wenn das Bild schwebt, wird es mithilfe der Funktion „scale()“ um das 1,25-fache vergrößert. Die Übergangseigenschaft sorgt für eine reibungslose Zoom-Animation.

Zusätzliche Hinweise

• Sie können den Skalierungswert anpassen, um die gewünschte Zoomstufe zu erreichen.
• CSS-Überlauf: versteckte Dose kann auf das Bild-Div angewendet werden, um alle überflogenen Teile des skalierten Bildes auszublenden.
• Die Zoom-Eigenschaft wird vom IE unterstützt, von anderen jedoch nicht Browser.

Demo

Hier ist eine Live-Demonstration:

<div class="thumbnail">
    <div class="image">
        <img src="https://placeimg.com/320/240/nature" alt="Image">
    </div>
</div>

<style>
    .thumbnail {
        width: 320px;
        height: 240px;
    }

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

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

    .image:hover img {
        transform: scale(1.25);
    }
</style>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS einen Bildzoomeffekt beim Schweben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!