Hallo teman – teman dumenity berjumpa lagi di dalam artikel dumetschool , pada kesempatan kali ini saya akan membahas tentang Cara Membuat efek Hover Zoom dengan CSS3. Efek hover adalah efek yang ditimbulkan ketika kursur berada pada elemen HTMl target. Membuat website tanpa animasi itu seperti ibarat makan nasi tanpa sayur, hehehe kok begitu, iya kalau kita membuat website tanpa di bumbui efek – efek animasi maka website akan berasa menonton. Sekarang saya akan mengenalkan kepada teman – teman tentang animasi – animasi yang ditimbul oleh CSS3. 

Banyak sekali animasi – animasi yang dapat kita buat menggunakan sebuah CSS3 salah satunya adalah yang akan kita buat pada kesempatan kali ini yaitu Cara Membuat efek Hover Zoom dengan CSS3, efek zoom yang di maksud di sini adalah Ketika kursus berada dalam sebuah element HTML target (dalam hal ini elemen HTMl yang diberi efek hover) maka akan menimbulkan sebuah efek background zoom dari tengah.

Kurang lebih hasilnya akan seperti di bawah ini:

Cara Membuat efek Hover Zoom dengan CSS3

Gamabar di atas adalah nilai awalnya, dan ketika diberi efek hover maka hasilnya akan seperti di bawah ini:

Cara Membuat efek Hover Zoom dengan CSS3

Oke untuk lebih jelasnya sekarang langsung saja kita praktikkan, pertama kita akan buat dulu file HTML-nya silahkan lihat di bawah ini:

 

Dari script HTML di atas kita membuat kelas kotak dimana nantinya kita akan membuat animasi di dalam kelas  kotak  dengan memanfaatkan kelas hover yang berada di dalam kelas kotak. Kelas hover akan kita kasih sebuah animasi zoom, jadi ketika kursor berada di atas kelas kotak maka kelas hover akan muncul dari tengah dengan ukuran yang sama dengan kelas kotak. Oke langsung saja kita masuk pada step selanjutnya pembuatan css3 untuk HTML di atas. Silahkan lihat di bawah ini:

Oke untuk melihat hasil akhirnya silahkan lihat demo. Oke semoga bermanfaat.