Pada kesempatan kali ini saya ingin memberikan sebuah tips dan trik bagaimana cara membuat slide text di atas gambar, dimana biasanya kita akan mendapatkan sebuah gambar lalu di atasnya ada sebuah tulisan yang memberitahu itu gambar apa, atau sebuah pesan apa, disini kita akan membuat seperti itu, tetapi akan kita berikan sedikit animasi untuk mempercantiknya, oke jadi seperti apa simak terus ya teman-teman.

Jadi seperti yang saya tulis di atas dimaan kita akan belajar cara membuat slide text di atas gambar akan kita tambahkan sebuah animasi, jadi animasinya seperti ini, pertama yang akan tampil ada sebuah gambarnya, dan ketika gambar itu kita hover maka ada sebuah teks yang muncul dari atas gambar, dan ketika crusor tidak di atas gambar, maka teks itu pun akan hilang, disini kita akan buat menggunakan sebuah jquery sedikit dan jangan lupa ada CSS yang penting disini yaitu ada positon, dan display none, untuk gambar kita sesuaikan karena disini saya menggunakan lebarnya 100%, oke langsung saja, caranya cukup simple seperti ini

Ya benar disini saya menggunakan sebuah bootstrap ya, untuk wadah dari lebar, dan sebuah penempatannya juga lalu disini saya akan mendapatkan sebuah jquery sedikit untuk membuat animasinya

Oke disini saya menggunakan slideToggle ya, jika kita bicara toggle yang jelas animasi itu akan hilang dan tampil, oke jika kita lihat hasilnya maka akan seperti ini

cara membuat slide text di atas gambar cara membuat slide text di atas gambar

Kebetulan ada sebuah watermark dumetschool yang menyantu dengan animasi yang saya buat yaitu di tengan jadi saya sarankan teman-teman copy terlebih dahulu dan coba ya, bagaimana jika kita membeirkan efek seperti ini yang jelas gambar yang kita punya akan tampil lebih cantik dari yang sebelumnya, oke saya rasa cukup sampai disini belajar kita tentang cara membuat slide text di atas gambar semoga bermanfaat dan sampai jumpa pada atikel berikutnya terimakasih.

WhatsApp chat