Pernah melihat portofolio atau galeri dengan warna abu-abu, kemudian ketika cursor diarahkan ke gambar, gambarnya menjadi berwarna? Jika pernah, berarti kamu sedang melihat efek Color Reveal on Hover dan kabar baiknya, kamu bisa membuat efek Color Reveal on Hover di Elementor tanpa harus menggunakan plugin tambahan, atau bahkan menggunakan kode kustom.
Dalam tutorial ini, kita akan membahas cara membuat efek Color Reveal on Hover di Elementor seperti itu, dan tentunya menggunakan Elementor versi gratis yang tersedia di directory WordPress.
Sebelum memulai, pastikan kamu sudah berada dihalaman edit page atau post menggunakan Elementor, serta sudah menyiapkan gambar yang akan ditambahkan ke halaman atau galeri. Jika sudah siap, maka kamu bisa mulai dari langkah pertama:
Kamu bisa menambahkan gambar atau gallery dulu yang bisa kamu pilih dari block Elementor, misalnya disini kita akan menggunakan gambar
Sekarang, pastikan untuk menambahkan gambar ke block gambar yang sudah kamu tambahkan ke canvas
Untuk Image Resolution pastikan kamu ubah menjadi Full. Secara default, gambar akan menggunakan resolusi Large.
Sekarang kamu bisa menambahkan efek greyscale pada gambar utama (sebelum di hover). Caranya, buka Tab Style > Normal > CSS Filters atur Saturation ke angka 0, atau bisa kamu sesuaikan lagi angkanya
Untuk kustomisasi lain, kamu bisa juga menyesuaikan angka Blur.
Supaya ketika dihover atau kursor diarahkan ke gambar memberikan efek warna ke gambar, kamu bisa menyesuaikan Style > Hover > CSS Filters atur Saturation ke angka 100, atau bisa kamu sesuaikan lagi
Supaya efek transisi ketika hover lebih smooth, kamu bisa juga menyesuaikan Transition Duration(s), misalnya dengan durasi 1 detik.
Itulah cara mudah membuat efek Color Reveal on Hover di Elementor yang bisa kamu coba. Mudah bukan?
KOMENTAR
Memuat...