Cara membuat efek zoom pada gambar di website



Membuat efek zoom pada gambar
Saya pernah mengunjungi sebuah website yang berisi informasi yang saya cari tentunya dengan design layout yang sangat elegan. Karena design yang elegan itu saya betah sekali berlama - lama di website tersebut. Tak hanya menikmati ke indahan layout web nya tapi saya juga banyak mendapatkan informasi yang pastinya sangat berguna untuk saya.

Salah satu yang membuat tampilan layout tersebut yang menurut saya elegan tentunya yaitu pada website tersebut mempunyai efek zoom pada gambar ketika kursor mouse mau mengklik link menu gambarnya. Nah, pada pengalaman tersebutlah saya ingin berbagi bagaimana cara membuat efek zoom pada gambar di website.



Cara membuat efek zoom pada gambar di website cukup mudah untuk dipelajari hanya menggunakan html dan css. Mungkin untuk anda yang pemula seperti saya awalnya agak sulit, namun lambat laun jika kita terus mencoba dan belajar dengan serius kesulitan seperti apapun pasti akan bisa teratasi. Pada akhirnya saya bisa membuat efek zoom pada gambar di website dan sekarang saya akan berbagi hasil belajar saya ke anda tetunya semoga bermanfaat.

Ok langkah awal silahkan ketikan kode/script html dibawah ini pada text editor yang anda miliki kemudian save file html tersebut dengan nama index.html.

<html>
<head>
    <title>Belajar Efek Zoom Pada Gambar</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head> <body>     <div class="wrap-gambar">
</body>
        <img src="1.jpg" class="gambar" />     </div> </html>

Dan selanjutnya buat file baru lalu ketikan file css dibawah ini di text editor anda lalu save dengan nama style.css.

.wrap-gambar {
    width: 150px;
    height: auto;
    overflow: hidden;
} .gambar {     width: 150px;
    transition: all 0.6s ease;
    height: auto; } .gambar:hover {
}
    transform: scale(1.5);
Langkah terakhir silahkan jalankan kode/script di atas dengan web browser yang anda miliki.



Jika anda menyukai artikel Cara membuat efek zoom pada gambar di website ini, mohon kiranya untuk meluangkan waktu agar bisa membagikan artikel ini kepada temen temen yang lain yang mungkin membutuhkan informasi ini, agar mereka bisa membaca dan mengetahui artikel ini,

Agar tidak ketinggalan update, atau tidak ketinggalan artikel-artikel lainya yang lebih baru, silahkan berlangganan dengan cara memasukan email aktif pada kolom yang sudah disediakan dibawah,



Lisensi Creative Commons. DMCA.com Protection Status

Aktifkan Pemberitahuan GRATIS Via Email, Agar kamu tidak ketinggalan update artikel terbaru dari kami, Masukan email anda dibawah ini, dan klik berlangganan:

Setelah Klik Tombol Berlangganan Silahkan Periksa Email kamu, dan Klik Link Validasi yang dikirim

Bagikan dengan link pendek : GOO.GL
Bagikan artikel ini :
+
0 Komentar untuk "Cara membuat efek zoom pada gambar di website"

Silahkan berikan komentar yang baik, Komentar anda adalah masukan yang sangat berharga bagi saya, Jika mau request silahkan tuliskan juga dikolom komentar ya kawan,

Dilarang Komentar
1. Promosi Jenis Apapun
2. Dilarang bully
3. Dilarang Spam
4. Dilarang Pasang Link Aktif,
5. Tidak sesuai dengan topik yang dibahas

Pelanggaran mengakibatkan komentar kamu akan dihapus tanpa pemberitahuan..!!

By : Admin Tutorapk.com

 
CopyrightCopyright © 2017 - 2018 Tutorapk.com