CARA MEMUAT EFEK ZOOM IN DAN OUT PADA GAMBAR POST BLOGGER

Efek Zoom In & Out - Menghias artikel blog itu penting asalkan tidak hiperbola, lantaran sesuatu yang hiperbola itu jelek. Style Css memiliki poly varian dan dapat digunakan dalam banyak tagg html, galat satu nya merupakan image atau gambar. Adapun pembahasan kali ini adalah tentang Cara memuat pengaruh zoom in dan zoom out pada sebuah gambar artikel (Post) blogger.
Sederhana saja, kita pribadi ke css zoom image post blogger buat mempersingkat saat, namun terdapat sedikit penjelasan tambahan tentang css zoom image ini yaitu "Css zoom image atau gambar kali ini merupakan salah satu efek hover (mouse hover) jadi gambar akan mengembang (zoom out) ketika dilalui sang mouse saja dan kembali normal saat tidak kemudian mouse, beitu pula dengan css imbas 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.lima);
}

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.lima);
}

Simpan kedua css tersebut kedalam template blog engkau sempurna diatas kode ]]> dan kemudian metode penerapan nya (buat memanggil css tersebut) mulaikah tulis sebuah artikel serta masukkan gambar menggunakan tag image misalnya berikut adalah. Engkau jua bisa meletakkan tag image "html" nya pada sebuah widget html sebagi promosi atau iklan offline engkau .
1.zoom Image Efect Tanpa Link
Tag image berikut ini adalah gambar tanpa disetai link

imgscale1" src="url_gambar" />

2.zoom Image Efect Dengan Link
Yang ini adalah zoom image yg disertai dengan link target

imgscale1"   href="url_tujuan">

url_gambar" />

3.contoh Penerapan Lainnya adalah misalnya berikut adalah.

//goo.gl/9mrasW"target="_blank">imgscale1" alt="Advertisment" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1yGrdOjRfgYqRM7UWPrLUBLAKhZlJhheREtYN4fLpHCNzA2Z2kdXAlGe2iaarQg8ogQRsuv8Ogpwvx_4TEbgFJ6TIqJ8RRJCHi0np7e92Lrky6D_CV76UjjZ3SitkjVIbJzIfdWtvMA/s640/hkripersen2Bindonesia.png" width="100%"/>

Ganti imgscale1 menjadi imgscale2 (Merubah zoom out sebagai zoom in)
Gantu url_tujuan dengan link yang ditargetkan example: //caraflexi.blogspot.com
Ganti url_gambar dengan url gambar yg ingin engkau tampilkan
Nah sesudah diterapkan dengan benar, maka hasilnya akan terlihat misalnya gambar berikut ini, silahkan arahkan mouse kamau buat melihat hasil-nya. Gambar dengana style css zoom out akan mengembang dan gambar dengan style css zoom in akan mengecil, ke 2 gambar tadi pula mempunyai link (Link Target) jika pada klick akan menunjuk ke url lain (artikel lain).

Demikian penjelasan mengenai cara membuat dampak zoom in dan efek zoom out dalam sebuah gambar postingan atau artikel blog, semoga ini berguna serta dapat membantu  kamu, jangan sungkan memberi komentar, finishing good luck for you.