Animasi hover overlay adalah suatu animasi yang akan keluar di dalam elemen tersebut ketika kita arahkan kursornya. Dimana animasi overlay bisa berupa tulisan, icon atau efek transparan, slide atau zoom. Biasanya animasi overlay ini sering digunakan pada sebuah gambar. Dan kali ini saya akan membahasnya pada artikel tentang Cara Membuat Animasi Hover Overlay Gambar Dengan AngularJs.Langkah pertama Cara Membuat Animasi Hover Overlay Gambar Dengan AngularJs yaitu kita membuat terlebh dahulu struktur htmlnya seperti script di bawah ini.

Jika sudah selesai maka kita akan membuat style cssnya seperti berikut ini.

Untuk membuat animasi overlay disini saya membuat text dan background transparan ketika kursor di arahkan ke div yang berisi gambar.

Jika sudah langkah terakhir kita akan membuat script angularjsnya seperti script berikut ini.

Oke teman-teman bisa perhatikan script di atas. Dimana ada dua fungsi yang saya buat di dalam controller. Fungsi pertama adalah myFunc() yang akan berjalan dengan menggunakan ng-mouseenter ketika mouse di arahkan dan fungsi kedua yaitu reset() yang dijalankan dengan menggunakan ng-mouseleave atau ketika mouse sudah pergi dan keluar dari objek.

Untuk fungsi myFunc() saya memberikan nilai hovermiddle dan hoverimage berupa nama kelas di css. dan kebetulan saya samakan namanya dengan variablenya. Dan kelas akan bertambah di dalam tag img dan div class middle ketika di hover. Dan jika mouse menjauh maka nilai hovermiddle dan hoverimage akan kosong kembali.

Jika di buka di browser maka tampilan animasi overlay akan seperti pada gambar di bawah ini.

 Cara Membuat Animasi Hover Overlay Gambar Dengan AngularJs

Demikian artikel tentang Cara Membuat Animasi Hover Overlay Gambar Dengan AngularJs. Semoga bermanfaat dan selamat mencoba.