10 CSS Perpustakaan untuk Kesan Hover Imej yang Lebih Baik

Membiarkan pengguna dengan mudah dan jelas mengetahui sebahagian daripada laman web yang boleh diklik adalah bahagian penting dalam reka bentuk UX. Cara lama tetapi emas untuk melakukannya adalah mengubah warna teks dan menggariskannya. Pada masa kini, dengan CSS, terdapat banyak lagi cara untuk menghantar kesan hover, terutamanya kepada imej.

Pemaju boleh sekarang tambah kesan peralihan atau animasi apabila peristiwa hover dipicu. Kami melihat gelongsor arah, mengezum pada kelajuan yang berbeza, fade-in dan fade-out, kesan engsel, perhatian mendedahkan, goyangan, lantunan dan banyak lagi.

Dalam kompilasi ini, terdapat lebih daripada 250 kesan hover untuk memberi inspirasi kepada anda. Anda juga boleh mengambil kod di sumbernya.

Kesan Hover Imej (16 kesan)

Di halaman ini, anda akan dapati koleksi 16 kesan gambar yang menarik dengan kapsyen. Dapatkan kod HTML dan CSS untuk setiap kesan dengan melayang di atas imej, kemudian klik Tunjukkan Kod.

Imej Caption Hover Animation (4 kesan)

Berikut adalah 4 animasi kapsyen sejuk yang dijalankan apabila seseorang melangkah ke atas imej. Kesannya dibina dengan peralihan dan transformasi tulen CSS3, dan tidak ada JavaScript, untuk meningkatkan kecocokan di seluruh pelayar.

iHover (35 kesan)

iHover adalah koleksi kesan hover yang dikuasakan oleh CSS3. Terdapat 20 kesan hover bulatan dan 15 kesan hover persegi. Untuk menggunakan kesan, anda perlu menulis beberapa markup HTML dan memasukkan fail CSS.

Hover Imej (44 kesan)

Perpustakaan ini mengandungi 44 kesan yang dibuat dengan CSS tulen. Antara kesannya termasuk memudar, menolak, slaid, engsel, mendedahkan, mengezum, mengaburkan, membalik, lipatan dan penutup, dalam pelbagai arah. Terdapat versi lanjutan 216 kesan yang boleh dibeli untuk € 14.

Hover Effect Ideas (30 kesan)

Imej hover demo ini dibuat oleh Codrop, memberi anda inspirasi apabila membuat peralihan yang lancar antara imej dan kapsyennya. Terdapat 30 kesan pada dua set dengan tutorial dan kod sumber.

Hover CSS (108 kesan)

Hover CSS membolehkan anda menambah kesan hover ke mana-mana unsur, seperti butang, pautan atau imej. Kesannya termasuk peralihan 2D, peralihan latar belakang, sempadan, peralihan Shadow dan Glow, dan banyak lagi. Perpustakaan ini tersedia dalam CSS, Sass, dan KURANG.

Animatisme (100+ kesan)

Terdapat lebih daripada 100 animasi hover imej untuk butang, overlay, butiran, kapsyen, imej dan butang media sosial. Semua kesan dikuasakan oleh CSS3.

Kesan Hover Keterangan (7 kesan)

Terdapat 7 pelbagai kesan dalam koleksi ini. Semua peralihan kelihatan sangat bagus dan lancar. Pergi ke bahagian tutorial untuk mengetahui cara menggunakan kesan ini pada projek anda.

Kesan Hover Imej CSS (15 kesan)

Satu koleksi kesan hover mudah seperti zoom, slaid, berputar, skala kelabu, kabur, kelegapan dan kesan asas yang lain. Anda boleh menggunakan kesan ini dengan menambah kelas CSS sebelum anda angka tag.

Kesan hover 3D yang menyedari arahan

Ini adalah kesan hover super sejuk yang akan mengesan pergerakan tetikus terakhir anda. Tajuk imej akan dibuka dari salah satu daripada empat arah berdasarkan posisi kursor terakhir anda.

Hover Animation

Berikut adalah animasi hover sempadan yang diilhamkan dari UNIQLO. Apabila acara hover, sempadan imej akan menjadi animasi.

Jubin dengan Hover Animasi

Satu untuk reka bentuk jubin, yang satu ini mempunyai zoom yang perlahan, slaid, pop-in, overlay yang kecil.

Kesan Hover Klip-SVG

Satu kesan sinaran gambar x-ray super hebat yang dikuasakan oleh SVG klip-jalan dan peralihan CSS. Bekerja dengan baik pada Chrome, Opera dan Safari.