Bagaimana untuk Mencipta Kesan Zum CSS pada Hover Tanpa Jadual atau Topeng?

Kesan Zum CSS pada Tuding Menggunakan Transform

Soalan:

Bagaimana saya boleh mencipta kesan zum pada leding tetikus pada imej HTML tanpa menggunakan jadual atau topeng divs?

Jawapan:

Menggunakan Sifat Transformasi dengan Skala

Pertimbangkan untuk menggunakan sifat transformasi CSS3 untuk mencapai zum- kesan seperti menggunakan skala. Begini caranya:

HTML:

<div class="thumbnail">
    <div class="image">
        <img src="path/to/image.jpg" 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);  
}

Penjelasan Demo:

• Nilai skala() menunjukkan pengganda untuk saiz asal imej, menghasilkan kesan zum 25%.
• Harta peralihan menentukan peralihan lancar bagi kesan zum.
• Pendekatan ini mengelak daripada menggunakan elemen tambahan atau helah CSS, menjadikannya satu cara mudah dan cekap untuk mencapai kesan zum yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Zum CSS pada Hover Tanpa Jadual atau Topeng?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!