Cara Membuat Efek Color Reveal on Hover di Elementor

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.

Gimana Cara Membuat Efek Color Reveal on Hover di Elementor?

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:

1. Tambahkan Gambar atau Gallery

Kamu bisa menambahkan gambar atau gallery dulu yang bisa kamu pilih dari block Elementor, misalnya disini kita akan menggunakan gambar

2. Tambahkan Gambar ke Block

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.

3. Tambahkan Efek Greyscale

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.

4. Tambahkan Efek Hover

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?