Cara Menambahkan Efek Hover Gambar di WordPress (5 Cara Mudah)

Menambahkan efek hover ke situs web Anda mungkin tampak seperti detail kecil, tetapi dapat meningkatkan tampilan dan kegunaan situs. Ketika pengunjung mengarahkan mouse mereka ke gambar atau tombol dan melihatnya berubah sedikit, itu memberi sinyal bahwa elemen tersebut interaktif. 

Pergerakan halus ini akan meningkatkan engagement dan membantu mengurangi tingkat pentalan. Efek hover sangat berguna dalam e-commerce. Mereka memungkinkan pembeli untuk melihat produk lebih dekat, mendorong mereka untuk menjelajahi lebih lanjut dan melanjutkan ke checkout.

Ada banyak cara untuk menambahkan efek hover gambar di WordPress, dari transisi sederhana hingga animasi flip yang menarik. Di bawah ini, Anda akan menemukan beberapa metode untuk memulai!

Cara Menambahkan Efek Hover Gambar di WordPress

Dalam artikel ini, kami telah mengumpulkan lima cara mudah untuk menambahkan efek hover ke situs Anda. Pilih yang mana yang paling sesuai untuk Anda!

Metode 1: Menggunakan Plugin

Sebuah plugin akan menghemat banyak waktu dan usaha, terutama jika Anda ingin menggunakan beberapa efek hover di situs yang sama.

Misalnya, jika Anda memiliki beberapa galeri gambar, Anda dapat menerapkan animasi yang berbeda untuk masing-masing, seperti zoom sederhana untuk thumbnail blog atau efek flip untuk gambar produk.

Menggunakan plugin seperti Image Hover Effects Ultimate membuat proses ini jauh lebih mudah. Plugin ini gratis untuk semua orang dan menawarkan berbagai efek untuk setiap elemen. Untuk memulai, cukup instal dengan mengikuti tutorial di bawah ini: 

Menginstal Plugin

• Buka area admin WordPress Anda.
• Klik Tambahkan Plugin dari menu Plugin di sidebar.

• Ketik Efek Hover Gambar Ultimate

• Pilih hasil pertama dan klik Instal Sekarang untuk memulai unduhan.
• Setelah instalasi selesai, klik tombol Aktifkan untuk mulai menggunakan plugin.

Menggunakan Plugin Efek Hover Gambar WordPress

• Setelah plugin terinstal, Anda akan melihat menu Hover Gambar baru di dasbor Anda.

• Klik menu untuk membuka pengaturan plugin. 

• Pilih efek yang ingin Anda gunakan. Untuk tutorial ini, kita akan bereksperimen dengan Pembesar Gambar.
• Setelah memilih efek, Anda akan melihat berbagai gaya animasi.

Ketika Anda menemukan satu yang Anda sukai, klik Buat Gaya

• Sebuah pop-up akan muncul. Masukkan judul di Nama bidang dan pilih efek dari tata letak (1, 2, atau 3). Lalu klik Simpan untuk melanjutkan.
• Anda akan dibawa ke halaman baru di mana Anda dapat menyesuaikan pengaturan, seperti tinggi, lebar, dan opasitas. Mainkan untuk melihat apa yang terlihat terbaik.

• Setelah Anda puas dengan pengaturan, klik Edit

• Pop-up lain akan muncul. Di sini Anda dapat menyesuaikan posisi pembesaran. 

• Anda juga dapat mengganti gambar dengan tombol Pilih Gambar.
• Setelah mengatur semuanya, klik Kirim untuk menyimpan efek hover Anda.

• Untuk menerapkan efek ke situs Anda, salin dan tempel kode pendek ke dalam postingan atau halaman Anda. 

• Sekarang efek hover gambar sederhana Anda siap digunakan di bagian mana pun dari situs Anda. 

Metode 2: Menggunakan CSS

Anda tidak perlu menginstal plugin apa pun untuk metode ini. Dengan menggunakan CSS kustom, Anda dapat menambahkan berbagai efek hover ke tema Anda.

Kami akan mulai dengan sesuatu yang sederhana, seperti efek hover garis bawah. Jika Anda ingin menambahkan efek ini ke tema Anda, ikuti langkah-langkah mudah di bawah ini:

• Navigasi ke posting di mana Anda ingin menambahkan efek hover.
• Tambahkan gambar dengan mengklik blok Sampul dari +.

• Masukkan konten Anda ke dalam blok Sampul. Di sini kami akan menambahkan judul dan tombol.

• Atur font dan gaya sesuai keinginan Anda.
• Simpan halaman sebagai draf.
• Selanjutnya, buka menu Tampilan di dasbor Anda.

• Kemudian, klik Kustomisasi dan pergi ke CSS Tambahan. Tambahkan kode berikut:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Klik Terbitkan untuk menyimpan kode.

• Sekarang kembali ke postingan Anda dan pilih teks yang ingin Anda terapkan efek garis bawah.
• Buka bagian Lanjutan di sidebar blok dan masukkan underline-hover di bidang Kelas CSS tambahan.

• Simpan halaman dan pratinjau untuk melihat efeknya. 

Ada begitu banyak efek hover untuk dipilih, jadi pilihlah yang paling sesuai dengan gaya Anda. Anda dapat belajar menulis CSS sendiri atau mencari contoh dari komunitas WordPress. Semuanya ada di luar sana!

Metode 3: Menggunakan Pembuat Halaman (mis., Elementor)

Pembuat halaman seperti Elementor memungkinkan Anda membangun situs web dengan banyak kreativitas. Ini memiliki efek hover bawaan, semua siap digunakan untuk menghidupkan situs Anda tanpa memerlukan coding.

Anda juga dapat menggunakannya untuk membuat efek hover gambar di WordPress. Di bagian ini, kami akan bereksperimen dengan efek hover bawaan di dalam pembuat halaman itu sendiri.

Untuk mengatur efek:

• Buka Elementor editor dari dasbor admin.
• Tambahkan gambar Anda.

• Pilih gambar Anda, lalu buka tab Gaya.
• Gulir ke bawah dan klik Arahkan.

• Di dalam menu dropdown Hover Animation, Anda akan menemukan berbagai efek siap pakai.

• Kami telah memilih efek Grow sebagai contoh. Anda kemudian dapat menyesuaikan durasi transisi, opasitas, dan pengaturan lainnya agar sesuai dengan desain situs Anda.

• Setelah Anda selesai, Anda akan dapat melihat efeknya segera tanpa perlu melihat pratinjau. 

Metode 4: Menggunakan Plugin Flipbox

Jika Anda mencari pintasan, Anda dapat menginstal plugin flipbox. Efek flipbox adalah ketika gambar terbalik untuk mengungkapkan konten di bagian depan atau belakang saat Anda mengarahkan kursor ke atasnya.

Efek ini sangat bagus untuk gambar fotografi, di mana Anda dapat menampilkan foto di depan dan detail kamera di belakang. Tapi kemungkinannya tidak terbatas.

• Dari dasbor WordPress Anda, klik menu Plugin. Lalu, pilih Tambahkan Plugin.
• Ketik Flipbox - Overlay Gambar Kotak Flip Luar Biasa di bilah pencarian.

• Klik Instal Sekarang, lalu Aktifkan plugin.

• Untuk membuat flipbox, buka Flip Box menu dan klik Buat Baru.
• Pilih animasi yang Anda sukai. Setelah Anda menemukan satu, klik Buat Gaya.

• Sebuah pop-up akan muncul. Pilih tata letak yang diinginkan (1, 2, atau 3) dan masukkan judul. 

• Klik Simpan untuk melanjutkan.
• Selanjutnya, Anda akan dibawa ke menu kustomisasi di mana Anda dapat mengatur efek dan menambahkan konten Anda.

• Gulir ke bawah untuk menemukan Pratinjau tab. Klik Edit untuk menyesuaikan konten untuk bagian depan dan belakang flipbox.

• Setelah selesai, klik Kirim untuk menyimpannya.

• Untuk menambahkan flipbox ini ke halaman Anda, cukup salin dan tempel kode pendek yang dihasilkan ke bagian mana pun di situs Anda. 

• Dan itu saja, inilah hasil akhirnya! 

Metode 5: Menggunakan Blok Gutenberg

Gutenberg adalah editor blok WordPress default yang memungkinkan Anda menambahkan efek hover langsung dalam editor.

Meskipun mungkin tidak menawarkan efek hover lanjutan, Anda dapat meningkatkan animasi menggunakan CSS kustom.

Sebagai contoh, mari kita buat efek fade sederhana pada hover. Berikut adalah tutorial langkah demi langkah:

• Navigasi ke postingan atau halaman di mana Anda ingin menambahkan efek hover.
• Klik + untuk menambahkan blok baru, lalu pilih blok Sampul.

• Di dalam blok Sampul, tambahkan blok Paragraf.

• Masukkan judul dan deskripsi singkat Anda.
• Sesuaikan ukuran font, opasitas, perataan, dan warna sesuai kebutuhan.

• Kemudian pilih Cover blok untuk menambahkan kelas CSS kustom.
• Buka Lanjutan bagian di sidebar kanan.
• Masukkan fade-hover-effect di Kelas CSS Tambahan bidang.

• Setelah itu, simpan halaman sebagai draf.

• Buka menu Plugin dan pilih plugin cuplikan kode Anda. Dalam contoh ini, kita menggunakan WPCode.
• Buat cuplikan CSS baru, lalu tempel kode berikut:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Simpan cuplikan dan aktifkan.
• Sekarang, pratinjau halaman Anda untuk melihat efek hover fade dalam tindakan.

Anda dapat menggunakan kembali efek ini dengan menambahkan kelas fade-hover-effect ke blok atau gambar mana pun. Namun jika Anda berhadapan dengan banyak gambar, pertimbangkan untuk menggunakan plugin seperti WP Media Folder untuk mengatur perpustakaan media Anda ke dalam folder. Ini membuatnya lebih mudah untuk menemukan dan menggunakan kembali konten terkait.

Apakah Menggunakan Banyak Efek Mempengaruhi Kinerja?

Ya, menggunakan terlalu banyak efek hover di situs Anda berpotensi memengaruhi kinerja, terutama jika tidak dioptimalkan dengan benar. Ini karena beberapa efek hover memerlukan CSS tambahan. Ukuran CSS situs Anda dapat bertambah dan memperlambat waktu muat halaman.

Sebaiknya hanya menggunakan efek hover yang penting untuk meningkatkan pengalaman pengguna tanpa membebani situs Anda.

Ringkasan

Mempelajari cara menambahkan efek hover gambar di WordPress dapat membantu meningkatkan situs Anda dengan meningkatkan interaksi pengguna dan membuatnya tetap terlibat.

Dengan berbagai cara untuk menambahkan efek hover, baik melalui plugin, CSS kustom, atau pembuat halaman, Anda memiliki kebebasan untuk memilih apa yang paling sesuai untuk Anda. Coba berbagai gaya untuk menemukan yang paling sesuai dengan situs Anda!