Wie erstelle ich einen CSS-Zoomeffekt beim Hover ohne Tabellen oder Masken?

CSS-Zoomeffekt beim Schweben mit Transformation

Frage:

Wie kann ich einen Zoomeffekt beim Schweben mit der Maus erzeugen? ein HTML-Bild ohne Verwendung von Tabellen oder Masken divs?

Antwort:

Verwenden der Transformationseigenschaft mit Skalierung

Erwägen Sie die Verwendung der Transformationseigenschaft von CSS3, um einen Zoom zu erreichen. ähnlicher Effekt mithilfe der Skalierung. So geht's:

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="/static/imghwm/default1.png" data-src="path/to/image.jpg" class="lazy" alt="Image hover effect">
    </div>
</div>

CSS:

.thumbnail {
    width: desired-width;
    height: desired-height;
}

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

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

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

Demo-Erklärung:

• Der Wert von scale() gibt den Multiplikator für an Originalgröße des Bildes, was zu einem Zoomeffekt von 25 % führt.
• Die Übergangseigenschaft gibt den sanften Übergang des Zoomeffekts an.
• Dieser Ansatz vermeidet die Verwendung zusätzlicher Elemente oder CSS-Tricks und macht ihn so einfach und effiziente Möglichkeit, den gewünschten Zoomeffekt zu erzielen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen CSS-Zoomeffekt beim Hover ohne Tabellen oder Masken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!