Membuat Gambar Zoom Responsive Dengan CSS

Berikut ini akan diuraikan langkah-langkah cara membuat ( Gambar Zoom Responsive Dengan CSS ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Gambar Zoom Responsive Dengan CSS ) sebagai berikut :
DAFTAR ISI CODE [Tampilkan][Sembunyikan]

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

KODE HTML

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

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Gambar Zoom Responsive Dengan CSS ) semoga bermanfaat terima kasih.