Pada saat melihat blog kawan-kawan lain saya sering melihat efek gambar pada saat cursor mengarah ke gambar (Hover) gambarnya tiba-tiba nge zoom. Mencoba Inpeksi Elemen ( kebiasaan ) ternyata kawan-kawan blogger memakai Css Untuk Zoom Gambar. Terlintas dalam hati untuk membuat Tutorial Zoom Gambar Dengan CSS, setelah melihat tutorial css oleh para master penulisannya cukup mudah dan yang pasti tidak se-ribet Tutorial PHP. Sekarang, saya mencoba menuliskan artikel Tutorial CSS : Membuat Efek Zoom Pada Gambar yang Tutorial CSS nya sudah banyak bertebaran di Tempat Blogger Coding.
Membuat Efek Zoom Gambar Dengan CSS
Maksudnya disini adalah kita akan membuat efek saat cursor menyentuh gambar maka gambar yang disentuh oleh cursor akan menzoom dengan sendirinya. Begitulah kira-kitaContoh Efek Zoom Pada Gambar:
Sekarang, mari kita membuat kode css untuk zoom gambar, agar lebih mudah mari kita praktekkan dengan salin kode css dibawah ini dan simpan.
Script CSS untuk Zoom Gambar
.img-zoom {
overflow: hidden;
width: 200px;
height: 200px;
}
.contoh-gambar-zoom {
width: 200px;
height: 200px;
}
.contoh-gambar-zoom:hover {
width: 250px;
height: 250px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
overflow: hidden;
width: 200px;
height: 200px;
}
.contoh-gambar-zoom {
width: 200px;
height: 200px;
}
.contoh-gambar-zoom:hover {
width: 250px;
height: 250px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
Ket :Diatas kita sudah membuat class dengan nama contoh-gambar-zoom maka nanti pada
<img src="#" /> kita tambahkan class contoh-gambar-zoom agar efek ini tidak berguna terhadap gambar lain alias cuma sendiri. (
Script Css efek zoom gambar
<div class="img-zoom">
<img class="contoh-gambar-zoom" alt="Tutorial CSS : Membuat Efek Zoom Pada Gambar" border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyKn6VNqR1L73KURxZPhFnfPPAmLU798GsC5wuzJUVO01RKTA04vfM77_F3pKedwNKDNGsAm7bdIvLX4BSwAispEl-M38ujGcPeQLeyxV8oY6SvFwks-AGsEESRd4TBnS9qVPhEvRkfII/s200/gambar-php-pemula-belajar+copy.png" title="Tutorial CSS : Membuat Efek Zoom Pada Gambar" />
</div>
<img class="contoh-gambar-zoom" alt="Tutorial CSS : Membuat Efek Zoom Pada Gambar" border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyKn6VNqR1L73KURxZPhFnfPPAmLU798GsC5wuzJUVO01RKTA04vfM77_F3pKedwNKDNGsAm7bdIvLX4BSwAispEl-M38ujGcPeQLeyxV8oY6SvFwks-AGsEESRd4TBnS9qVPhEvRkfII/s200/gambar-php-pemula-belajar+copy.png" title="Tutorial CSS : Membuat Efek Zoom Pada Gambar" />
</div>
Selanjutnya silahkan anda coba arahkan cursor ke gambar tersebut, apakah gambarnya akan menzoom / memperbesar dengan sendirinya. Jika Efek Zoom Pada Gambar dengan css tidak berhasil berarti masih ada kesalahan pada script diatas.
Terima kasih telah membaca sebuah artikel Membuat Efek Zoom Pada Gambar. Baca lebih banyak lagi artikel tentang CSS atau tentang HTML pada website ini. Dan jangan lupa untuk berbagi yang ada dibawah artikel ini. Jika masih ada kesulitan tentang penerapan CSS pada website bisa menggunakan komentar dibawah. Salam.
