Pada tutorial kali ini anda akan belajar menggunakan properties yang berguna untuk memberikan efek zoom in saat di hover, contoh pada sebuah gambar.
Pada website-website tertentu biasanya pada web company profile yang banyak menampilkan gambar-gambar atau product perusahaan, dan banyak dari web tersebut menggunakan effect zoom in untuk mempercantik tampilan website mereka.
Oke sekarang saya akan memberikan contohnya bagaimana caranya membuat efek zoom in saat gambar di hover. Check this out :
HTML //
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="img/006.jpg" > </script> </body> </html>
CSS//
img { transition: all .2s ease-in-out; }
img:hover { transform: scale(1.1); }
Setelah kalian salin silahkan jalankan pada browser masing-masing, karena ini efek yang realtime saya tidak bisa menampilkan hasilnya jadi kalian saksikan sendiri hasilnya. kalau tidak ada salah penulisan pasti akan berhasil karena sudah saya coba sendiri.