Hai, ketemu lagi dengan saya, kali ini saya akan berbagi tutorial mengenai Cara Membuat Animasi Zoom Dengan HTML-CSS, Sebenarnya banyak sekali cara untuk membuat animasi zoom, tapi tidak ada salahnya untuk mencoba cara yang akan saya berikan berikut ini.
Langsung saja, silahkan buka teks editornya terlebih dahulu, kemudian ketikan kode HTML berikut ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<map name=m1><area shape=rect coords="170 5 195 30" href=#img1></map> <map name=m2><area shape=rect coords="170 5 195 30" href=#img2></map> <map name=m3><area shape=rect coords="170 5 195 30" href=#img3></map> <map name=m4><area shape=rect coords="170 5 195 30" href=#img4></map> <div id=wrapper> <img id=img1 class=img usemap=#m1 src=http://bit.ly/29OsQ4k /> <a href=# class=close></a> <img class=expand src=http://icons.iconarchive.com/icons/icons8/ios7/16/Editing-Expand-icon.png/> <img id=img2 class=img usemap=#m2 src=http://bit.ly/2anclbb /> <a href=# class=close></a> <img class=expand src=http://icons.iconarchive.com/icons/icons8/ios7/16/Editing-Expand-icon.png/> <img id=img3 class=img usemap=#m3 src=http://bit.ly/2aQcqZl /> <a href=# class=close></a> <img class=expand src=http://icons.iconarchive.com/icons/icons8/ios7/16/Editing-Expand-icon.png/> <img id=img4 class=img usemap=#m4 src=http://bit.ly/2acSgrJ /> <a href=# class=close></a> <img class=expand src=http://icons.iconarchive.com/icons/icons8/ios7/16/Editing-Expand-icon.png/> </div> |
Pada bagian img src kalian bisa memasukan gambar sesuai keinginan, setelah itu lanjutkan untuk kode CSS berikut 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
@import url(https://fonts.googleapis.com/css?family=Bungee+Shade); .img { border-radius: 2px; box-shadow: 0 0 5px #343436; filter:brightness(1.1); height: 150px; width: 200px; } .img:target { height: 450px; width: 500px; } .img:target+.close { display: block; } .img:target+.close+.expand{ display: none; } .close { background-image: url(http://bit.ly/29QeT21); background-repeat: no-repeat; bottom: 418px; display: none; height: 32px; left: 462px; margin-top: -32px; position: relative; width: 32px; } .expand{ bottom: 125px; margin-left: -32px; margin-right: 16px; pointer-events: none; position: relative; } #wrapper { margin: auto; padding: 10px; text-align: center; width: 500px; } body{ background-image: linear-gradient(to bottom, #178FDD 68px, antiquewhite 68px ); height: 1000px; } h2{ color: #000; font-family: bungee shade, georgia; text-align: center; text-shadow: 0 0 2px #343436; } |
Kalo sudah semua diketikan, jangan lupa disimpan kemudian jalankan dibrowser masing-masing dan lihat hasilnya. Selesai.
Lumayan mudah yah ? silahkan kalian bisa modifikasi lagi. Baik sekian tutorial mengenai Cara Membuat Animasi Zoom Dengan HTML-CSS, semoga bermanfaat, amin.
Selamat mencoba.