Membuat Efek Hover Zoom Dengan CSS3

Membuat Efek Hover Zoom Dengan CSS3 – Setelah jauh mempelajari CSS Dasar, kita akan melanjutkan pembelajaran di www.malasngoding.com tentang web design. Ini adalah tutorial pertama di kategori web design di malasngoding.com. oleh sebab itu kita akan mempelajari dasar dulu dari web design. walaupun tidak terlalu dasar sih. untuk mendesign sebuah website atau belajar menjadi seorang web designer, yang harus kita lakukan adalah dengan banyak-banyak melihat template-template atau design komponen website dari situs-situs lain untuk mendapatkan inspirasi baru untuk di kembangkan. saya juga sebenarnya kurang ahli di dalam web design. karena dari dulu saya memfokuskan diri pada back-end. tetapi tidak ada salahnya sih menurut saya jika ingin mempelajari web design walaupun kita seorang back-end developer. toh yang penting kan kita punya niat terus menggali potensi dan berlatih dengan kemauan yang sangat keras. Membuat Efek Hover Zoom Dengan CSS3

Baca juga :

• Membuat tombol flat dengan css
• Membuat modal dialog dengan jquery tanpa plugin
• Cara design tampilan table bergaya elegant

Karena saya juga tidak terlalu ahli di bagian web design, jadi kita akan belajar bersama-sama tentang cara mendesign tampilan website. oke kita kembali ke topik lagi. kita akan belajar membuat efek hover zoom pada saat hover pada sebuah gambar. jadi gambar akan di kita beri efek zoom pada saat cursor mouse kita letakkan pada element gambar tersebut. image hover effect zoom

Membuat Efek Hover Zoom Dengan CSS3

Diasumsikan kepada teman-teman yang belum mempelajari atau memahami tentang css dasar, sebaiknya teman-teman membaca tutorial saya sebelumnya dulu tentang tutorial CSS dasar dan tutorial HTML dasar. oke langsung saja buat sebuah file html atau php terserah teman-teman. karena di sini saya hanya membuat contoh efek hover zoom dengan css3 maka saya cuma membuat file html. saya beri nama hoverzoom.html

hoverzoom.html

style.css

dan coba teman-teman jalankan pada browser

membuat efek hover zoom dengan css3

sekarang untuk mencoba efek hover dengan css3 nya silahkan teman-teman letakkan cursor nya di atas gambar. maka gambar akan berefek zoom. Membuat Efek Hover Zoom Dengan CSS3

jadi akan saya jelaskan sedikit. di sini yang berperan untuk membuat zoom nya adalah

jadi pada zaat element zoom effect di hover maka gambar akan di beri transform scale sebesar 1.08. teman-teman bisa menyeseuaikan nya sesuai keinginan seberapa jauh jarak zoom yang teman-teman inginkan.

See the Pen membuat effect hover zoom image dengan css3 by Malas Ngoding (@malasngoding) on CodePen.0

Oke sekian dulu tutorial cara Membuat Efek Hover Zoom Dengan CSS3. baca juga tutorial lain nya di www.malasngoding.com tentang tutorial membuat aplikasi android dengan ionic.