Kita semua tahu bagaimana kustomisasi tanpa batas dengan Elementor Website Builder . Dengan penyesuaian itu, kami dapat meningkatkan pengalaman pengguna dan menjadi kreatif dalam apa yang kami buat.
Logo Swap on Hover effect adalah ketika pengguna menempatkan kursor pada logo yang ditempatkan di situs web Anda, maka secara otomatis mengubah detailnya yaitu warna, bentuk, atau garis besar. Dalam tutorial ini, kita akan memahami cara membuat logo swap pada efek hover dengan Elementor .
Cara Membuat Logo Swap Pada Efek Hover Menggunakan Elementor
Anda sudah tahu apa efeknya dan memiliki ide di benak Anda tentang apa yang ingin Anda buat, mari kita lanjutkan dan lihat caranya.
Untuk memulai, tambahkan bagian dalam untuk widget.
Buat Situs Web Luar Biasa
Dengan Elementor pembuat halaman gratis terbaik
Mulai sekarang
Selanjutnya, Anda perlu menambahkan kolom di bagian yang Anda buat pertama kali. Untuk tutorial ini, kita akan menggunakan struktur dua kolom .
Kemudian drag dan drop widget gambar ke kolom yang Anda buat.
Agar efeknya berfungsi, Anda akan membutuhkan dua gambar. Satu untuk ditampilkan secara normal, sedangkan yang lainnya ditampilkan saat pengguna meletakkan kursornya.
Anda dapat menggunakan dua variasi logo yang sama atau menggunakan dua gambar yang sama sekali berbeda, kemungkinannya tidak terbatas.
Setelah pemilihan gambar, di bidang CSS khusus, rekatkan kode CSS berikut untuk membuat logo swap pada efek hover berfungsi.
selector img:hover{
content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
opacity: .50;
transition-duration: 3s;
}Dan selesai! Publikasikan halaman Anda untuk melihat pratinjau dan melihat bagaimana efeknya terlihat di situs web Anda. Kembalilah untuk membuat perubahan apa pun jika Anda mau.
Ini adalah bagaimana Anda dapat membuat efek Logo Swap On Hover dengan Elementor . Pastikan untuk bergabung dengan kami di  Facebook  dan Twitter kami untuk tetap update tentang posting kami.
