Bagaimanakah Saya Boleh Mencipta Kesan Zum Imej pada Tuding Hanya Menggunakan Transformasi CSS3?

Kesan Zum Imej CSS pada Tuding dengan Transformasi CSS3

Mencipta kesan tuding yang mengezum ke dalam imej boleh dicapai dengan mudah menggunakan sifat transformasi CSS3 . Pendekatan ini memerlukan kod minimum dan menyediakan peningkatan visual yang anggun tanpa memerlukan jadual kompleks atau div topeng.

Pelaksanaan

Untuk mencipta kesan zum, ikut langkah berikut:

1. HTML: Letakkan imej di dalam bekas elemen.

<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: Gunakan gaya CSS untuk mengawal zum imej.

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

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

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

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

• Sifat peralihan mentakrifkan tempoh dan fungsi pelonggaran kesan penskalaan.
• Transformasi: sifat scale() menskalakan imej apabila kursor melayang di atas bekas.

Contoh

Lihat contoh biola berikut: https://jsfiddle.net/rkd3x4uc/

Nota:

• Harta zum, yang menggunakan zum secara langsung pada imej, hanya disokong di Internet Penjelajah. Sifat transform: scale() lebih disukai untuk keserasian merentas penyemak imbas.
• Untuk mengekang imej berskala dalam sempadan bekas, anda boleh menambah limpahan: tersembunyi pada kelas .image.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Zum Imej pada Tuding Hanya Menggunakan Transformasi CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!