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.

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 ;

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

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.

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

Share this post