Cara Membuat Gambar Zoom Responsif Diblog

Cara Membuat Gambar Zoom Responsif Diblog
Cara Membuat Gambar Zoom Responsif Diblog Dengan CSS - efek zoom(perbesar) biasanya akan terlihat blur atau pecah, kenapa ? karena Script yang digunakan tersebut tidak responsif sehingga mengakibatkan ukuran dan warna menjadi berubah jelek.

Baca Juga : Cara Mendapatkan Ide Konten Blog

agar tampilan gambar menjadi responsif anda perlu melakukkan penyusunan elemen objek agar dapat mengikuti dimensi layar komputer maupun android, cukup susun media screen layar responsif dengan hasilnya seperti ini ;
Cara Membuat Gambar Zoom Responsif Diblog

bagaimana apakah anda ingin mencobanya ? oke langsung saja pada tahap persiapan sibawah ini .

Baca Juga : Cara Membuat Blog Dummy Dengan Mudah

Langkah Langkah Membuat Gambar Zoom Responsif Diblog


1. Buka akun blog > postingan artikel > buka Html .
2. copy kode dibawah ini dibagian yang akan dipasang Efek zoom.
<style type="text/css">
#i-zoom {
  display:-webkit-box; display:-webkit-flex; display:-ms-flexbox;
  display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between;
  -ms-flex-pack:justify; justify-content:space-between;
  max-width:1600px;margin:0 auto}

#i-zoom figure {
  position:relative; -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1;
  flex:1; max-width:500px;-webkit-transition:1s;
  -moz-transition:1s;transition:1s; margin:0}

#i-zoom img {
  width:200px;max-height:200px;border:1px solid;object-fit:cover;
  object-position:0% 0%;-webkit-transition:1s;-moz-transition:1s;
  transition:1s;font-size:0;line-height:0}

#i-zoom figure:hover {-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2}
#i-zoom figcaption {
  position:absolute;top:43%; left:105%; opacity:0; width:50%;color:#ccc}

#i-zoom figure:hover img { width:100%; max-height:700px; object-fit:none}
#i-zoom figure:hover figcaption {
  -webkit-animation:captionfade forwards 1s 1s;
  -moz-animation:captionfade forwards 1s 1s;
  animation:captionfade forwards 1s 1s}

#i-zoom figure:nth-child(2) {text-align:center}
#i-zoom figure:nth-child(2) figcaption {text-align:left}
#i-zoom figure:last-child {text-align:right}
#i-zoom figure:last-child figcaption {left:-55%}
@keyframes captionfade {from {opacity:0} to {opacity:1}}
@media all and (max-width: 600px) {
#i-zoom {
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -webkit-flex-direction:column;-ms-flex-direction:column;
  flex-direction:column}
#i-zoom figcaption {top:102%;left:0;width:30%}
#i-zoom figure {max-width:100%}
#i-zoom img {border:none;text-align:center}
#i-zoom figure:nth-child(2) figcaption,
#i-zoom figure:last-child figcaption  {top:-11%;left:auto;right:0;width:25%}
#i-zoom figure:last-child figcaption {top:-18%}}

@media all and (max-width:400px) {
#i-zoom figure:hover {margin-bottom:4rem}
#i-zoom figcaption,#i-zoom figure:nth-child(2) figcaption,
#i-zoom figure:last-child figcaption {width:100%;text-align:center}
#i-zoom figure:nth-child(2) figcaption {top:-7%}
#i-zoom figure:nth-child(3) figcaption {top:-9%}
#i-zoom figure:nth-child(2):hover,
#i-zoom figure:nth-child(3):hover {margin-top:4rem;margin-bottom:0}}
</style>
3. copy kode dibawah ini dan masukkan url gambar di teks " gambar disini.jpg "
<div id="i-zoom">
  <figure>
    <img src="gambar sisini.jpg" alt="itseeboy">
       <figcaption>photo dari google</figcaption>
  </figure>
</div>
4. save/publish dan lihat hasilnya.

Note : jika tidak tampil link demo versi android bisa buka dengan versi dekstop.
Baca Juga : Cara Costum Domain SSL Langsung Dari Blogger




baiklah itu cara membuat gambar dengan efek zoom responsif diblog, mudah bukan silahkan dicoba ya temen temen. apabila ada masalah dalam pemasangan bisa langsung komentar dibawah ini. terimakasih
Sign out
Baca Juga ×
Powered by Blogger.