Bagaimana untuk Mencipta Kesan Zum Imej pada Hover Menggunakan CSS?

Kesan Zum pada Imej pada Tuding Menggunakan CSS

Dalam pembangunan web, menggunakan kesan zum pada imej pada tuding tetikus ialah elemen reka bentuk biasa. Mari terokai penyelesaian menggunakan transformasi CSS3.

Transformasi CSS3 untuk Kesan Zum

Fungsi sifat dan skala() transformasi CSS3 membenarkan kesan zum pada imej. Berikut ialah coretan kod:

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);
}

Dalam contoh ini, div imej mengandungi imej. Apabila imej berlegar, imej meningkat sebanyak 1.25 kali menggunakan fungsi skala(). Sifat peralihan memastikan animasi zum yang lancar.

Nota Tambahan

• Anda boleh melaraskan nilai skala untuk mencapai tahap zum yang dikehendaki.
• Limpahan CSS: tersembunyi boleh digunakan pada div imej untuk menyembunyikan mana-mana bahagian limpahan imej berskala.
• Sifat zum disokong oleh IE tetapi bukan oleh pelayar lain.

Demo

Berikut ialah demonstrasi langsung:

<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>

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