Trik Dan Tips Cara Memuat Efek Zoom In Dan Out Pada Gambar Post Blogger

Cara Memuat Efek Zoom In dan Out Pada Gambar Post Blogger

Efek Zoom In & Out - Menghias artikel blog itu penting asalkan tidak berlebihan, alasannya yaitu sesuatu yang berlebihan itu tidak baik. Style Css mempunyai banyak varian dan sanggup dipakai pada banyak tagg html, salah satu nya yaitu image atau gambar. adapun pembahasan kali ini yaitu tentang Cara memuat efek zoom in dan zoom out pada sebuah gambar artikel (Post) blogger.

Sederhana saja, kita pribadi ke css zoom image post blogger untuk mempersingkat waktu, namun ada sedikit klarifikasi pelengkap mengenai css zoom image ini yaitu "Css zoom image atau gambar kali ini merupakan salah satu efek hover (mouse hover) jadi gambar akan membesar (zoom out) dikala dilalui oleh mouse saja dan kembali normal dikala tidak kemudian mouse, beitu juga dengan css efek zoom in (menyusut/mengecil), berikut css zoom image (gambar) nya.

Css Image Zoom Out (Perbesar Gambar)

.imgscale1 { height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.imgscale1:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
}

Css Image Zoom In (Perkecil Gambar)

.imgscale2 { height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.imgscale2:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
}

Simpan kedua css tersebut kedalam template blog kau sempurna diatas aba-aba ]]></b:skin> dan kemudian metode penerapan nya (untuk memanggil css tersebut) mulaikah tulis sebuah artikel dan tambahkan gambar dengan tag image menyerupai berikut ini. kau juga sanggup meletakkan tag image "html" nya pada sebuah widget html sebagi promosi atau iklan offline kamu.

1.Zoom Image Efect Tanpa Link

Tag image berikut ini merupakan gambar tanpa disetai link

<img class="imgscale1" src="url_gambar" /></img>

2.Zoom Image Efect Dengan Link

Yang ini yaitu zoom image yang disertai dengan link target

<a  class="imgscale1"   href="url_tujuan"><img  border="0" src="url_gambar" /></a>

3.Contoh Penerapan Lainnya yaitu menyerupai berikut ini.

<center><a title="Trik dan Tips Cara Memuat Efek Zoom In dan Out Pada Gambar Post Blogger" href="https://goo.gl/9mrasW"target="_blank"><img class="imgscale1" alt="Cara Memuat Efek Zoom In dan Out Pada Gambar Post Blogger Trik dan Tips Cara Memuat Efek Zoom In dan Out Pada Gambar Post Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRSh58sKXXolfKPK8gqdXxgG223NXbLzSwvMlCZoPwcDfaw1u_SbJICOJ0DoUIYf7LzhNvT0Qfh-_j8wrFcm8lMpxuQ_7K9wcaINaA0yXbjWjr2jZsrlQ93FQZYdVhntpH52aTJTHY3Y0/s640/hkri+indonesia.png" width="100%"/></a></center>

Ganti imgscale1 menjadi imgscale2 (Merubah zoom out menjadi zoom in)
Gantu url_tujuan dengan link yang ditargetkan example: http://tukanglistrikpulaubatam.blogspot.com
Ganti url_gambar dengan url gambar yang ingin kau tampilkan

Nah sesudah diterapkan dengan benar, maka karenanya akan terlihat menyerupai gambar berikut ini, silahkan arahkan mouse kamau untuk melihat hasil-nya. Gambar dengana style css zoom out akan membesar dan gambar dengan style css zoom in akan mengecil, kedua gambar tersebut juga mempunyai link (Link Target) jikalau di klick akan mengarah ke url lain (artikel lain).



Demikian klarifikasi mengenai cara menciptakan efek zoom in dan efek zoom out pada sebuah gambar postingan atau artikel blog, biar ini bermanfaat dan sanggup membantu  kamu, jangan sungkan memberi komentar, finishing good luck for you.