Hello Codersss mimin ingin memberikan sedikit ilmu Cara Membuat Zoom In dan Out Menggunakan Css Nah sebelum kita memasuki pada tahap lanjut untuk memulainya apa kalian mengerti maksud dari zoom in dan zoom out pada gambar ini yapsss kalo dipikiran mimin sih kalian udah mengerti ya gk Codersss hehe.
Nah bagi kalian nih yang belum mengerti apa itu zoom in dan zoom out pada gambar , mimin akan memberikan sedikit pengetahuan untuk sobat Codersss mimin ini hehehe . Zoom in apa itu zoom in ? zoom in ini yang berarti memperbesar pada suatu objek gambar dan begitu juga sebaliknya dengan zoom out ya Codersss ,
Sekarang mimin akan memberikan Contoh Source Code pada zoom in gambar nah sebelum kalian copy script dibawah ini coba kalian lihat pada gambar dibawah ini dan kalian sentuh dengan kursor kalian Codersss Nah kurang lebih begitulah hasil dari Source code zoom in ini Codersss..
<html>
<head>
<style type="text/css">
.img {
height: 200px;
width: 200px;
overflow: auto;
}
.zoomin img {
height: 200px;
width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomin img:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="zoomin img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1jB41oLsoBvVvxnzwYB-fudVZDFnl4R5ikEFedkqwKIzqEkuiJpLOS_cw4P0XcpGuSX2aKTXcbAEGqI5OZsGr-4OZszwc0LexSMIFX3DzHBzznbDDsUFty4BPFUIpEtGjRHApMVX7dA/s1600/tongcoders.png" title="Cara Membuat Zoom In dan Out Menggunakan Css" />
</div>
</body>
</html>
Setelah kalian copy script diatas tersebut coba kalian simpan dengan extensi .html contoh > zoomin.html Nah Gimana Codersss keren buka hehehe Nah selanjutnya kalian lihat lagi pada paragraf dibawah ini
Sekarang coba kalian sentuh lagi pada gambar dibawah ini , gambar dibawah ini merupakan suatu source code dari code css dan html dari Zoom Out Nah gimana untuk cara membuatnya sekarang coba kalian copy script dibawah ini.
<html>
<head>
<style type="text/css">
.img {
height: 200px;
width: 200px;
overflow: hidden;
}
.zoomout img {
height: 300px;
width: 300px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.zoomout img:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="zoomout img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1jB41oLsoBvVvxnzwYB-fudVZDFnl4R5ikEFedkqwKIzqEkuiJpLOS_cw4P0XcpGuSX2aKTXcbAEGqI5OZsGr-4OZszwc0LexSMIFX3DzHBzznbDDsUFty4BPFUIpEtGjRHApMVX7dA/s1600/tongcoders.png" title="Cara Membuat Zoom In dan Out Menggunakan Css" />
</div>
</body>
</html>
Setelah itu kalian save ya Codersss dengan extensi html lagi contoh > zoomout.html lalu kalian jalankan dibrowser kesayangan kalian Codersss hehehe.
Nah setelah itu bisa kalian edit dibagian transition dan bagian overflow, fungsinya untuk apa transition? fungsinya cukup mudah yaitu waktu transisi pada objek yang ingin kita berikan efek zoom atau laiinnya .
Nah kalau bagian overflow bisa kalian edit dengan kata hidden, atau auto fungsinya untuk menyembunyikan, menampakkan, atau membuat scroll. Dimana fungsi ini bisa diterapkan dalam objek teks ataupun gambar. kalian bisa mengganti dengan kata overflow: auto, scroll, hidden, display
Gimana Codersss Paham kan hehehe lumayan lah Mungkin itu dulu dari mimin Cara Membuat Zoom In dan Out Menggunakan Css , oke Codersss jangan lupa untuk membaca article-artilce menarik lainnya ya dan jangan lupa untuk subscribe agar tidak ketinggalan postingan menarik dari TongCoders ini ya Sobat Codersss makasih.
Tidak ada komentar:
Posting Komentar