Gambar Zoom Responsive Dengan CSS - Efek zoom (membesar) biasanya akan terlihat pecah atau blur saat gambar default di hover, karena dimensi format pada gambar diperkecil saat ditampilkan sebagai pelengkap tulisan dan akan membesar saat efek hover bekerja. Gambar zoom dengan format efek seperti itu akan terlihat jelek atau kurang menarik. Bisa saja kita buat aturannya seperti ini:


//memotong ukuran gambar saat ditampilkan dengan nilai
img {
  position: relative;
  float: left;
  width: 100px; //batas lebar gambar
  max-height: 100px; //batas tinggi maksimal gambar
  cursor: pointer
}

//saat objek dihover
hover {
  margin: 0;
  list-style: none;
  /* zoom effect */
  width: 300px;
  height: 308px
}


Yang hasilnya bisa Anda lihat di : » Membuat Koleksi Gambar Hover Efek Zoom Right.
Agar gambar awal terlihat sama dengan gambar saat di zoom, yang perlu Anda lakukan adalah menyusun elemen objek (gambar) agar dapat mengikuti dimensi layar komputer dimana efek ini di tampilkan (responsive). Cukup susun media screen layar responsive dengan format yang sama seperti » Cara Mengatur Halaman Blog Agar Responsive dengan pola seperti ini:

@media all and (max-width: 600px) {
#i-zoom {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}
}


Maka hasilnya akan terlihat lebih baik seperti ini:

Gambar zoom responsive





DEMO SHOW




Sangat mudah dan sederhana bukan.!?
Bagaimana, apakah Anda mau mencoba.? dibawah ini semua bahan-bahan untuk membuat gambar zoom responsive sudah saya siapkan, tidak perlu ada yang diubah dan diperbaharui, cukup COPY kode CSS dibawah ini, lalu letakkan dalam formulir editor HTML posting Anda, kode lengkapnya seperti ini:


<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>


SELESAI..!! tinggal memanggil semua perintah elemen-elemen diatas dengan kode HTML seperti ini, namun sebelumnya ganti teks yang saya beri warna MERAH dengan gambar Anda, HTML lengkapnya seperti ini:

Info TERBARU:
» Tips Mencegah Komentar Spam Masuk Ke Situs
» Membuat Pesan Teks Melayang Saat Halaman Terbuka
» Diary Notes Theme Sitemap Responsive
» Daftar Domain Situs Penyedia Backlink Berkualitas | SEO



<div id="i-zoom">
  <figure>
    <img src="URL-Gambar.jpg" alt="SB-77 Design">
       <figcaption>Fhoto Diupload dari GOOGLE.
By. Sahabat Blogger 77</figcaption>
  </figure>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Gambar Zoom Responsive Dengan CSS
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

29 komentar

  1. selamat malam mbak Devy :-)

    Demo show nya kerenz mbak tapi lebih kere nz lagi kalau pakai fotonya kang cilembu atau foto kang yanto cungkup :-)

    BalasHapus
    Balasan
    1. takutnya menyalah gunakan hak cipta kang jum, apalagi tentang muat gambar, kudu ijin orangnya tau..

      Hapus
    2. bener banget mbak devy, takutnya orang yang dipajang gak terima malah repot,

      Hapus
    3. klo gtu pke fotonya kg jum aja ,,, pasti bakal di izinkan ,,,,hehe

      Hapus
    4. Terimah kasih yang amat dalam kami ucapkan kepada MBAH SELONG yang
      telah memberikan kebahagian bagi keluarga kami…berkat Beliau saya
      sekarang udah hidup tenang karena orang tuaku udah buka usaha dan
      punya modal untuk buka bengkel skrang pun orang tuaku tidak di
      kejar-kejar hutang lagi…dan keluarga Kami di berikan Angka
      Ritual/Goib Dari mbah yg sangat Jitu 100%dijamin
      tembus…hingga keluarga kami sekarang merasa tenang
      lagi…terimah kasih mbah…Jika Anda ada yg merasa kesulitan
      masalah Nomer ToGEL silahkan hbg Aja MBAH SELONG
      dinmr hp beliau (081-322-565-355) atau klik http://prediksiangkahoki88.blogspot.com/
      dan saya sudah membuktikan 3kali berturut2 tembus terimah kasih

      Hapus
  2. keren banget nih mbak tutorialnya, wajib saya coba nih, selama ini kalau buat gambar asal asaln aja deh

    BalasHapus
    Balasan
    1. hmmm...kaykanya mas PURNAMA baru pulang tarawih ya, soalnya tumben tuh panggil saya dengan sebutan Mbak gak biasanya, biasanya mas, hehe..!!

      ok dech kalau begitu, silahkan di coba mas PUR, semoga sukses menerapkannya.

      Hapus
  3. Mungkin lebih ok klo pake foto mbaknya

    BalasHapus
  4. Lebeh menarik mungkin kalo pake foto mbaknya, hahah....

    BalasHapus
    Balasan
    1. ntar yang ada bukannya fokus melihat dan mempelajari itu konsep kodenya, malah ngelihat foto adminnya mulu lagi, hehe..!!

      Hapus
  5. Selamat pagi mbak devy bagus mbak hasil nya saya sudah lihat penampakan nya tadi :D responsive nya juga posisinya mantap :D hehe

    BalasHapus
  6. Boleh juga tipsnya. Eh, itu file URL-Gambar.jpg yang di-load kan versi yg besar toh? Lebih efisien klo pas load gambar kecil yang di-load versi yang kecil kan? Kira-kira gimana itu bisa nggak? Buat PR lah, hehehe :p

    salam web programmer..

    BalasHapus
    Balasan
    1. Dalam hal ini sudah Devy jelaskan, apabila kita upload gambar dalam file yang kecil, maka saat HOVER Zoom gambar akan membesar dan terlhat pecah,

      efek ini bukan gambar yang saya atur dimensinya, tetapi layar saat tampil dan layar saat zoom, jadi format gambar tetap 1 (bukan yang besar dan yang kecil).
      sebagai contoh coba buat konsep gambar dengan 3 buah Gambar dengan mengubah kode HTML menjadi seperti ini:

      <div id="i-zoom">
      <figure>
      <img src="URL-Gambar.jpg" alt="SB-77 Design">
      <figcaption>Fhoto Diupload dari GOOGLE.
      By. Sahabat Blogger 77</figcaption>
      </figure>

      <figure>
      <img src="URL-Gambar.jpg" alt="SB-77 Design">
      <figcaption>Fhoto Diupload dari GOOGLE.
      By. Sahabat Blogger 77</figcaption>
      </figure>

      <figure>
      <img src="URL-Gambar.jpg" alt="SB-77 Design">
      <figcaption>Fhoto Diupload dari GOOGLE.
      By. Sahabat Blogger 77</figcaption>
      </figure>
      </div>


      dan lihat hasilnya.

      Hapus
  7. berarti css nya di letakan setiap kita posting apa gmna mba ? saya mah pengen setiap postingan itu gambarnya bisa nge zoom, dan bisa di geser2 , kaya olshop gitu, :-d

    BalasHapus
    Balasan
    1. Ya ngk to mba,,cukup pada Edit HTML doang.. ntar kalo mau posting artikel cuman taroh gambarnya aja.. terus Publish.. lihat hasilnya..

      Hapus
    2. Tergantung mbak DEVINA PUTRI, jika secara sengaja efek ini kita tampilkan secara individual atau hanya berlaku pada beberpa posting yang kita inginkan saja, maka letakkan semua kode tersebut dalam posting saat menulis artikel, formulir halaman HTML bukan yang compose, seperti ini:

      http://4.bp.blogspot.com/-1TCwibq3tjM/VNTg9uwNsrI/AAAAAAAABn4/l2XIFceXjvE/s1600/formulir%2BHTML.jpg

      tetapi jika kita fungsikan untuk bekerja pada semua gambar dalam posting, maka letakkan kode CSS itu dalam area <b:skin> lalu untuk HTML tinggal mengganti perintah calssed URL gambar dengan mengganti nilai valuenya seperti ini:

      <div class="separator" style="clear: both; text-align: center;">
      ...
      URL-Gambar
      ...
      </div>

      //ganti class="seperator" dengan class yang digunakan dalam CSS

      Hapus
    3. Baru tau saya mba.. nambah ilmu lagi nih.. terimakasih senior.. (h)

      Hehe, padahal bukan saya yang nanya..

      Hapus
    4. hehehe , jadi kalo untuk semua postingan pakenya yang di simpan di bawah kode b:skin ya
      nah nambah ilmu juga buat mas anonymous :d

      Hapus
    5. jadi tinggal mengganti classnya aja untuk menampilkan zoom pada gambar....oh ya sadah juga saya coba untuk beberapa gambar, ternyata responsivenya bisa menyesuaikan posisi gambar dan tidak pecah juga sista...saya pelajari aja dulu ya sista...menarik juga nih

      Hapus
  8. Terima kasih tutorialnya, kebetulan gambar di blog aku tidak responsiv, jadi terlihat aneh pas dibuka lewat henpon. Mudah-mudahan cara ini bisa work dgn baik...

    BalasHapus
    Balasan
    1. hmm...mudah-mudahan sih begitu...
      kita doakan saja ya mas, semoga work, hehe..!!

      Hapus
  9. Bagus ini tutorial untuk di terapkan di blog saya

    BalasHapus
  10. saya mau pasang mbak biar gambar postnya bisa jelas terlihat

    BalasHapus
  11. hasilnya bagus banget, postingan pasti lebih menarik dg memasang zoom

    BalasHapus
  12. ada paertanyaan di Cara Membuat Gambar Melengkung Dan Berputar..
    kirain td masih di moderasi kolom komentrnya..

    BalasHapus
  13. mba kalo untuk melindungi gambar biar ga bisa di copas di save as oelh orang lain gimana ya mba?

    BalasHapus
  14. ko saya g bisa ya g zoom. biasa aja

    BalasHapus
  15. wah, ini dia yang saya cari-cari mbak, dan ini juga cocok sekali untuk web toko online ya

    BalasHapus
  16. keren sob. ntar tak coba khusus untuk efek poto. 8-)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK