10 Perpustakaan CSS untuk Efek Image Hover yang Lebih Baik

Membiarkan pengguna dengan mudah dan jelas tahu bagian mana dari halaman web yang dapat diklik adalah bagian penting dari desain UX. Cara lama tapi emas untuk melakukannya adalah mengubah warna teks dan menggarisbawahinya. Saat ini, dengan CSS, ada banyak lagi cara untuk memberikan efek hover, terutama ke gambar.

Pengembang sekarang bisa tambahkan efek transisi atau animasi ketika sebuah peristiwa melayang dipicu. Kami melihat slide arah, memperbesar pada kecepatan yang berbeda, fade-in dan fade-out, efek engsel, pengungkapan sorotan, goyangan, pantulan dan banyak lagi.

Dalam kompilasi ini, ada lebih dari 250 efek hover untuk menginspirasi Anda. Anda juga dapat mengambil kode di sumbernya.

Efek Gambar Hover (16 efek)

Di halaman ini Anda akan menemukan koleksi yang bagus dari 16 melayang-layang efek gambar dengan teks. Raih kode HTML dan CSS untuk setiap efek dengan mengarahkan kursor ke gambar, lalu mengklik Tampilkan Kode.

Animasi Teks Melayang Gambar (4 efek)

Berikut adalah 4 animasi takarir keren yang berjalan saat seseorang melayang di atas gambar. Efeknya dibangun dengan transisi dan transformasi CSS3 murni, dan tanpa JavaScript, untuk meningkatkan kompabilitas di browser.

iHover (35 efek)

iHover adalah kumpulan efek hover yang didukung oleh CSS3. Ada 20 efek hover lingkaran dan 15 efek hover persegi. Untuk menggunakan efek, Anda perlu menulis beberapa markup HTML dan memasukkan file CSS.

Image Hover (44 efek)

Perpustakaan ini berisi 44 efek yang dibuat dengan CSS murni. Beberapa efek termasuk memudar, mendorong, slide, engsel, mengungkapkan, zoom, kabur, membalik, lipatan dan daun jendela, dalam berbagai arah. Ada versi diperpanjang dari 216 efek yang dapat dibeli seharga € 14.

Arahkan Efek Efek (30 efek)

Demo hover gambar ini dibuat oleh Codrop, memberi Anda inspirasi saat melakukan transisi yang mulus antara gambar dan keterangannya. Ada total 30 efek pada dua set dengan tutorial dan kode sumber.

Arahkan CSS (108 efek)

Hover CSS memungkinkan Anda menambahkan efek hover ke elemen apa pun, seperti tombol, tautan, atau gambar. Efeknya termasuk transisi 2D, transisi latar belakang, perbatasan, transisi Shadow dan Glow, dan banyak lagi. Perpustakaan tersedia dalam CSS, Sass, dan KURANG.

Animatisme (100+ efek)

Ada lebih dari 100 animasi hover gambar ke tombol, overlay, detail, teks, gambar, dan tombol media sosial. Semua efek didukung oleh CSS3.

Efek Hover Judul (7 efek)

Ada 7 berbagai efek dalam koleksi ini. Semua transisi terlihat sangat bagus dan lancar. Buka bagian tutorial untuk mempelajari cara menerapkan efek ini pada proyek Anda.

Efek Gambar Hover CSS (15 efek)

Kumpulan efek hover sederhana seperti zoom, slide, rotate, grey scale, blur, opacity, dan efek-efek dasar lainnya. Anda dapat menggunakan efek ini dengan menambahkan kelas CSS sebelum Anda angka menandai.

Efek hover 3D yang sadar arah

Ini adalah efek hover yang sangat keren yang akan mendeteksi pergerakan mouse terakhir Anda. Keterangan gambar akan terbuka dari salah satu dari empat arah berdasarkan posisi kursor terakhir Anda.

Arahkan Animasi

Berikut ini adalah animasi hover perbatasan yang terinspirasi dari UNIQLO. Setelah acara melayang, batas gambar akan menjadi animasi.

Ubin dengan Animasi Hover

Satu untuk desain ubin, yang satu ini menampilkan zoom lambat, slide, pop-in, overlay redup antara lain.

SVG clip-Path Hover Effect

Efek sorotan gambar x-ray super luar biasa didukung oleh SVG jalur klip dan transisi CSS. Berfungsi dengan baik di Chrome, Opera dan Safari.