Membuat Hover Zoom In dengan CSS

Di panduan kali ini sahabat akan belajar menggunakan properties yang bermanfaat bagi memberikan efek zoom in dikala di hover, contoh di sebuah gambar.



Di website-website tertentu  biasanya di web company profile yang  banyak menampilkan gambar-gambar atau product perusahaan, dan  banyak dari web tersebut menggunakan effect zoom in bagi mempercantik tampilan situs mereka.



Oke sekarang ini saya akan memberikan contohnya bagaimana caranya membangun efek zoom in dikala 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 di browser masing-masing, karena ini efek yang realtime saya tak dapat menampilkan hasilnya jadi kalian saksikan sendiri hasilnya.  kalau tak ada salah penulisan pasti akan berhasil karena telah saya coba sendiri.




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Image
Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Menghapus Isi Dari Form Input Menggunakan Javascript. Terkadang di ketika kita menginput comment di suatu laman pasti pernah mengalami salah ketik atau ingin menghapus segala isian form yang telah kita isi. Nah, kini saya akan mencoba membangun tombol atau button bagi menghapus isinya sekaligus.
Read more

Membuat Form Menarik Menggunakan HTML dan CSS

Image
Halo sobat, apa kabar segala. Berjumpa lagi dengan saya di panduan Source Code Aplikasi , di artikel kali ini kita akan latihan Membuat Form Menarik  Menggunakan HTML dan CSS . Form yang akan kita bikin yaitu form yang benar-benar cantik khususnya para kaum hawa yang menyukai warna pink,
Read more