Cara menggunakan efek gambar css
|
Jika Anda ingin gambar untuk menurunkan jika itu harus, tetapi tidak pernah skala hingga lebih besar dari ukuran aslinya, tambahkan berikut: Show Contohimg { Tip: Baca lebih lanjut tentang Desain Web Responsif di kami CSS RWD Tutorial . Teks gambarBagaimana posisi teks dalam gambar: ContohBottom Left Top Left Top Right Bottom Right Centered Cobalah sendiri: Top Left » Kanan Atas» Kiri Bawah » Bawah Kanan» Centered »Polaroid Images / KartuLidah Troll di Hardanger, Norwegia Cahaya Utara di Norwegia Contohdiv.polaroid { Filter gambarCSS Catatan: Filter properti tidak didukung di Internet Explorer, Ujung 12, atau Safari 5.1 dan sebelumnya. ContohMengubah warna semua gambar menjadi hitam dan putih (100% abu-abu): img { Tip: Pergi ke kami penyaring Referensi CSS untuk mempelajari lebih lanjut tentang filter CSS. Responsif GaleriCSS dapat digunakan untuk membuat galeri gambar. Contoh ini menggunakan query media untuk menata kembali gambar pada ukuran layar yang berbeda. Mengubah ukuran jendela browser untuk melihat efek: Menambahkan deskripsi gambar di sini Menambahkan deskripsi gambar di sini Menambahkan deskripsi gambar di sini Menambahkan deskripsi gambar di sini Contoh.responsive { Tip: Baca lebih lanjut tentang Desain Web Responsif di kami CSS RWD Tutorial . Gambar Modal (Advanced)Ini adalah contoh untuk menunjukkan bagaimana CSS dan JavaScript dapat bekerja sama. Pertama, gunakan CSS untuk membuat jendela modal (kotak dialog), dan menyembunyikannya secara default. Kemudian, gunakan JavaScript untuk menampilkan jendela modal dan untuk menampilkan gambar dalam modal, ketika pengguna mengklik gambar: Home » Membuat Efek Hover Zoom Dengan CSS3 Membuat Efek Hover Zoom Dengan CSS3 – Setelah jauh mempelajari CSS Dasar, kita akan melanjutkan pembelajaran di www.malasngoding.com tentang web design. Ini adalah tutorial pertama di kategori web design di malasngoding.com. oleh sebab itu kita akan mempelajari dasar dulu dari web design. walaupun tidak terlalu dasar sih. untuk mendesign sebuah website atau belajar menjadi seorang web designer, yang harus kita lakukan adalah dengan banyak-banyak melihat template-template atau design komponen website dari situs-situs lain untuk mendapatkan inspirasi baru untuk di kembangkan. saya juga sebenarnya kurang ahli di dalam web design. karena dari dulu saya memfokuskan diri pada back-end. tetapi tidak ada salahnya sih menurut saya jika ingin mempelajari web design walaupun kita seorang back-end developer. toh yang penting kan kita punya niat terus menggali potensi dan berlatih dengan kemauan yang sangat keras. Membuat Efek Hover Zoom Dengan CSS3 Baca juga :
Karena saya juga tidak terlalu ahli di bagian web design, jadi kita akan belajar bersama-sama tentang cara mendesign tampilan website. oke kita kembali ke topik lagi. kita akan belajar membuat efek hover zoom pada saat hover pada sebuah gambar. jadi gambar akan di kita beri efek zoom pada saat cursor mouse kita letakkan pada element gambar tersebut. image hover effect zoom Membuat Efek Hover Zoom Dengan CSS3Diasumsikan kepada teman-teman yang belum mempelajari atau memahami tentang css dasar, sebaiknya teman-teman membaca tutorial saya sebelumnya dulu tentang tutorial CSS dasar dan tutorial HTML dasar. oke langsung saja buat sebuah file html atau php terserah teman-teman. karena di sini saya hanya membuat contoh efek hover zoom dengan css3 maka saya cuma membuat file html. saya beri nama hoverzoom.html hoverzoom.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html> <head> <title>Membuat Efek Hover Zoom Dengan CSS3 | www.malasngoding.com</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Efek Zoom Dengan CSS3 | www.malasngoding.com</h1>
<p> <a href="https://www.malasngoding.com/zoom-effect-image-css/">Tutorial Efek Hover Zoom CSS3</a> </p> <div class="wrapper"> <div class="zoom-effect"> <div class="kotak"> <img src="https://www.malasngoding.com/wp-content/uploads/2016/02/gambar.jpg"/> </div> </div> </div> </body> </html> style.css 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 53 54 body { color: #232323; font-family: roboto; background-color: #85D1D8; }
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; }
.kotak { position: absolute; top: 0; left: 0;
}
.kotak img { -webkit-transition: 0.4s ease; transition: 0.4s ease; width: 700px; }
.zoom-effect:hover .kotak img { -webkit-transform: scale(1.08); transform: scale(1.08); } dan coba teman-teman jalankan pada browser  membuat efek hover zoom dengan css3 sekarang untuk mencoba efek hover dengan css3 nya silahkan teman-teman letakkan cursor nya di atas gambar. maka gambar akan berefek zoom. Membuat Efek Hover Zoom Dengan CSS3 jadi akan saya jelaskan sedikit. di sini yang berperan untuk membuat zoom nya adalah 1 2 3 4 5 6 7 8 9 10 .kotak img { -webkit-transition: 0.4s ease; transition: 0.4s ease; width: 700px; }
.zoom-effect:hover .kotak img { -webkit-transform: scale(1.08); transform: scale(1.08); } jadi pada zaat element zoom effect di hover maka gambar akan di beri transform scale sebesar 1.08. teman-teman bisa menyeseuaikan nya sesuai keinginan seberapa jauh jarak zoom yang teman-teman inginkan. See the Pen membuat effect hover zoom image dengan css3 by Malas Ngoding (@malasngoding) on CodePen.0 Oke sekian dulu tutorial cara Membuat Efek Hover Zoom Dengan CSS3. baca juga tutorial lain nya di www.malasngoding.com tentang tutorial membuat aplikasi android dengan ionic. Incoming search terms:
Diki Alfarabi Hadi Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Tags: css3 hover effect menu, css3 zoom effect, efek zoom css3, hover effect in css3, hover zoom css, image hover effect zoom, image hover zoom effect in css, zoom hover effect Tutorial CSS Dasar
Tutorial CSS3 Dasar
Produk
Tutorial Terbaru
Toko KamiSOCIALMalas Ngoding TUTORIAL MENARIK LAINNYAMembuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ... Diki Alfarabi Hadi Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ... Diki Alfarabi Hadi Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ... Diki Alfarabi Hadi
|
