Cara Memudar Gambar di Mouseover di WordPress (Sederhana & Mudah)

Apakah Anda ingin memudarkan gambar pada gerakan mouse di WordPress?

Animasi fade-in atau fade-out sederhana saat pengguna menggerakkan mouse ke gambar dapat membuat situs Anda lebih menarik. Ini juga mendorong pengunjung untuk berinteraksi dengan konten Anda, yang dapat membuat mereka tetap berada di situs Anda lebih lama.

Pada artikel ini, kami akan menunjukkan cara menambahkan efek gambar pudar pada gerakan mouse di WordPress.

Mengapa Memudar Gambar di Mouseover di WordPress?

Animasi adalah cara mudah untuk membuat situs web Anda lebih menarik, dan bahkan dapat menarik perhatian pengunjung ke konten terpenting laman Anda, seperti logo situs web atau a panggilan untuk bertindak.

Ada banyak cara yang berbeda untuk gunakan animasi CSS di WordPress, tetapi menambahkan efek hover ke gambar sangat efektif. Animasi pudar berarti gambar Anda akan muncul atau menghilang secara perlahan saat pengunjung mengarahkan kursor ke gambar tersebut.

Ini mendorong orang untuk berinteraksi dengan gambar Anda, dan bahkan dapat menambahkan elemen bercerita ke halaman. Misalnya, gambar yang berbeda mungkin memudar masuk dan keluar saat pengunjung bergerak di sekitar halaman.

Tidak seperti beberapa animasi lainnya, gambar fade pada efek mouseover tidak kentara sehingga tidak akan berdampak negatif pada pengalaman membaca pengunjung atau apa pun. pengoptimalan gambar Anda telah melakukan.

Dengan itu, mari tunjukkan cara menambahkan fade ke gambar Anda di mouseover di WordPress.

Menambahkan Image Fade pada Mouseover ke semua Gambar WordPress

Cara termudah untuk menambahkan efek pudar ke semua gambar Anda adalah dengan menggunakan WPCode. Plugin gratis ini memungkinkan Anda untuk dengan mudah menambahkan kode khusus di WordPress tanpa harus mengedit file tema Anda.

Dengan WPCode, bahkan pemula dapat mengedit kode situs web mereka tanpa risiko kesalahan dan kesalahan ketik yang dapat menyebabkan banyak hal kesalahan umum WordPress.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin WPCode gratis. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami di cara install plugin wordpress.

Setelah aktivasi, pergilah ke Cuplikan Kode » Tambahkan Cuplikan.

Di sini, cukup arahkan mouse Anda ke ‘Add Your Custom Code.’

Saat muncul, klik ‘Use snippet’.

Untuk memulai, ketikkan judul untuk cuplikan kode khusus. Ini bisa berupa apa saja yang membantu Anda mengidentifikasi cuplikan di dasbor WordPress.

Kita harus tambahkan CSS khusus ke WordPressjadi buka tarik-turun ‘Jenis Kode’ dan pilih ‘Cuplikan CSS.’

Di editor kode, tambahkan cuplikan kode berikut:

.post img:hover{ opacity:0.6; filter:alpha(opacity=60); /* Untuk IE8 dan sebelumnya */ -webkit-transition: all 2s ease; -moz-transition: semua 2s kemudahan; -ms-transition: semua 2s kemudahan; -o-transisi: semua 2s kemudahan; transisi: semua 2s kemudahan; }

Cuplikan kode ini akan memudarkan setiap gambar selama 2 detik saat pengguna mengarahkan mouse ke atasnya. Untuk membuat gambar memudar lebih lambat, cukup ganti ‘2s ease’ dengan angka yang lebih tinggi. Jika Anda ingin membuat gambar memudar lebih cepat, gunakan ‘1s ease’ atau lebih kecil.

Anda juga dapat membuat ‘opacity’ lebih tinggi atau lebih rendah dengan mengubah garis opacity:0.6.

Jika Anda mengubah angka-angka ini, pastikan Anda mengubahnya di semua properti (webkit, moz, ms, dan o), sehingga efek fade terlihat sama di setiap browser.

Saat Anda puas dengan cuplikannya, gulir ke bagian ‘Penyisipan’. WPCode dapat menambahkan kode Anda ke lokasi berbeda, seperti setelah setiap posting, hanya frontend, atau hanya admin.

Untuk menambahkan efek memudar ke semua gambar Anda, klik ‘Sisipkan Otomatis.’ Kemudian, buka menu tarik-turun ‘Lokasi’ dan pilih ‘Site Wide Header.’

Setelah itu, Anda siap menggulir ke bagian atas layar dan mengeklik sakelar ‘Nonaktif’, sehingga berubah menjadi ‘Aktif’.

Terakhir, klik ‘Simpan Cuplikan’ untuk mengaktifkan cuplikan CSS.

Sekarang, jika Anda mengarahkan mouse ke gambar apa pun di situs WordPressAnda akan melihat efek fade beraksi.

Menambahkan Animasi Pudar Gambar ke Halaman Individual

Menggunakan efek pudar untuk setiap gambar bisa mengganggu, terutama jika Anda menjalankan situs fotografitoko stok foto, atau situs lain yang memiliki banyak gambar.

Dengan mengingat hal itu, Anda mungkin ingin menggunakan efek fade pada halaman atau postingan tertentu saja.

Kabar baiknya adalah WPCode memungkinkan Anda membuat kode pendek khusus. Anda dapat menempatkan kode pendek ini di halaman mana saja, dan WordPress hanya akan menampilkan efek fade di halaman itu saja.

Untuk melakukan ini, cukup buat cuplikan kode khusus dan tambahkan kode animasi pudar mengikuti proses yang sama seperti yang dijelaskan di atas. Kemudian, klik tombol ‘Simpan cuplikan’.

Setelah itu, scroll ke bagian ‘Insertion’, tapi kali ini pilih ‘Shortcode.’

Ini membuat kode pendek yang dapat Anda tambahkan ke halaman, pos, atau area siap-widget mana pun.

Setelah itu, lanjutkan dan aktifkan cuplikan dengan mengikuti proses yang sama seperti yang dijelaskan di atas.

Anda sekarang dapat pergi ke halaman, posting, atau area widget siap pakai dan membuat blok ‘Shortcode’ baru. Kemudian, cukup tempel kode pendek WPCode ke dalam blok itu.

Untuk informasi lebih lanjut tentang cara menempatkan shortcode, silakan lihat panduan kami di cara menambahkan kode pendek di WordPress.

Setelah selesai, klik tombol ‘Perbarui’ atau ‘Publikasikan’ untuk mengaktifkan kode pendek. Anda kemudian dapat mengunjungi halaman, halaman, atau area siap-widget itu untuk melihat efek fade on mouseover.

Menambahkan Animasi Pudar Gambar ke Gambar Unggulan

Pilihan lainnya adalah menambahkan animasi fade ke file Anda menampilkan gambar atau memposting thumbnail. Ini adalah gambar utama kiriman dan sering muncul di samping judul di beranda Anda, halaman arsipdan area penting lainnya di situs Anda.

Dengan memudarkan gambar unggulan pada gerakan mouse, Anda dapat membuat situs Anda lebih menarik dan menarik, tanpa menganimasikan setiap gambar di seluruh halaman Anda. blog WordPress atau situs web.

Untuk menambahkan animasi fade ke thumbnail posting Anda, cukup buat potongan kode khusus baru dengan mengikuti proses yang sama seperti yang dijelaskan di atas.

Namun, kali ini tambahkan kode berikut ke editor:

img.wp-post-image:hover{ opacity:0.6; filter:alpha(opacity=60); /* Untuk IE8 dan sebelumnya */ -webkit-transition: all 2s ease; -moz-transition: semua 2s kemudahan; -ms-transition: semua 2s kemudahan; -o-transisi: semua 2s kemudahan; transisi: semua 2s kemudahan; }

Setelah itu, scroll ke kotak ‘Insertion’ dan pilih ‘Auto Insert.’ Kemudian, buka menu tarik-turun ‘Lokasi’ dan pilih ‘Site Wide Header.’

Setelah itu, Anda dapat melanjutkan dan mengaktifkan cuplikan kode menggunakan proses yang sama seperti yang dijelaskan di atas.

Sekarang, Anda dapat mengarahkan mouse ke gambar apa pun untuk melihat animasi fade beraksi.

Jika Anda ingin menambahkan lebih banyak lagi efek mouseover gambar, lihat panduan kami di cara menambahkan efek hover gambar di WordPress.

Bonus: Animasikan Gambar, Teks, Tombol, dan Lainnya

Efek fade adalah cara yang menyenangkan untuk membuat gambar lebih menarik, tetapi ada banyak cara lain untuk menggunakan animasi di WordPress. Misalnya, Anda mungkin menggunakan animasi flipbox untuk menampilkan teks saat pengunjung mengarahkan kursor ke gambar, atau menggunakan efek zoom agar pengguna dapat menjelajahi gambar dengan lebih mendetail.

Jika Anda ingin mencoba efek yang berbeda, maka SeedProd memiliki lebih dari 40 animasi yang dapat Anda tambahkan ke gambar, teks, tombol, video, dan lainnya. Anda bahkan dapat menganimasikan seluruh bagian dan kolom hanya dengan beberapa klik.

Di dalam editor SeedProd, cukup klik konten yang ingin Anda animasikan, lalu pilih tab ‘Lanjutan’ di menu sebelah kiri.

Anda kemudian dapat melanjutkan dan mengklik untuk memperluas bagian ‘Efek Animasi’.

Setelah itu, cukup pilih animasi dari dropdown ‘Entrance Animation’, termasuk berbagai efek fade yang berbeda.

Untuk informasi lebih lanjut, silakan lihat panduan kami di cara membuat halaman arahan dengan WordPress.

Kami harap artikel ini membantu Anda mempelajari cara memudarkan gambar pada gerakan mouse di WordPress. Anda mungkin juga ingin melihat panduan kami di bagaimana memilih perangkat lunak desain web terbaikdan pilihan pakar kami plugin popup WordPress terbaik.

Jika Anda menyukai artikel ini, silakan berlangganan ke kami Saluran Youtube untuk tutorial video WordPress. Anda juga dapat menemukan kami di Twitter Dan Facebook.

.

Sumber Artikel