Hallo teman – teman bertemu lagi dengan saya, masih dalam tutorial dumet blog, pada tutorial kali inio saya akan membahas tentang Cara Membuat Efek Hover Zoom CSS.
Kalau dalam Jquery ada namanya wow.js di sini saya juga akan mengajarkan teman – teman membuat animasi seperti wow.js dengan menggunakan fungsi – fungsi dari CSS3. Caranya cukup mudah dan tidak susah di sini kita akan menerapkan pada sebuah image, jadi ketika kursor berada di atas sih image maka image tersebut akan mengalami perubahan menjadi zoom.Oke langsung saja kita praktek, sebelum kita mempraktekkannya terlebih dahulu teman – teman siapkan bahannya. Pertama – tama teman – teman siapkan dulu text-editor dan imagenya, untuk image silahkan teman – teman tentukan sendiri. Kalau sudah silahkan teman – teman tuliskan script di bawah ini pada text editor teman – teman;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Membuat Efek Hover Zoom Dengan CSS3 | www.dumet_school.com</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>www.dumet_school.com</h1> <p> <a href="http://www.dumetschool.com/">Tutorial Efek Hover Zoom CSS3</a> </p> <div class="wrapper"> <div class="zoom-effect"> <div class="kotak"> <img src="index.jpg"/> </div> </div> </div> </body> </html> |
kalau sudah silahkan teman- teman save dan jalan pada browsernya, maka hasilnya akan seperti dibawah ini;
Sekarang kita akan mengatur CSS pada HTML di atas silahkan teman – teman tuliskan script di bawah ini;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
h1{ text-align: center; } p{ text-align: center; } a{ color: #232323; text-decoration: none; font-weight: 500; } a:hover{ text-decoration: underline; } .wrapper { width: 700px; margin: 0 auto; } .zoom-effect { position: relative; width: 100%; height: 360px; margin: 0 auto; overflow: hidden; left: 132px; } |
Kalau sudah silahkan teman – teman save, maka hasilnya akan berubah seperti dibawah ini.
Oke sekarang hasilnya sudah hampir mendekati, tinggal kita mengatur CSS pada class kotak dan hovernya, oke teman – teman silahkan tuliskan script dibawah ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.kotak { position: absolute; top: 0; left: 130; } .kotak img { -webkit-transition: 0.4s ease; transition: 0.4s ease; width: 355px; } .zoom-effect:hover .kotak img { -webkit-transform: scale(1.08); transform: scale(1.08); } |
Kalau sudah silahkan save dan jalan pada browsernya, maka hasilnya akan seperti dibawah ini
Oke itulah tadi pembahasan saya tentang Cara Membuat Efek Hover Zoom CSS3 semoga dapat bermanfaat.