Membuat Gambar Dengan Efek Zoom Hover CSS3

Membuat Gambar Dengan Efek Zoom Hover CSS3 - Lagi-lagi tentang mendesain gambar gallery foto, jika sebelumnya telah dibahas tentang Cara Membuat Efek Remote Link Pada Gambar, dengan belajar CSS3 anda bisa menghemat ruang postingan blog anda dengan Membuat Gambar Dengan Efek Zoom Hover CSS3.

Cara Membuat Gambar Dengan Efek Zoom Hover CSS3 berikut pantas buat anda pemilik blog yang sebagian besar postingannya tentang share foto/gambar, karena pada gallery ini default layout gambar hanya akan berbentuk thumbnail yang tampil didalam posting blog anda, sehingga tidak akan memanjang kebawah jika gambar yang anda posting cukup banyak, namun nampak akan membesar jika pada gambar tersebut tersentuh oleh mouse.

Buat anda yang gemar mendesain gallery gambar agar terlihat unik seperti Cara Membuat Tampilan Gambar Berputar Di Blog, berikut cara efisien dan minimalis dan terlihat elegant dengan Membuat Gambar Dengan Efek Zoom Hover CSS3.

I. Copy kode berikut saat anda menulis postingan di mode HTML

<style>
#sb77-gallery { overflow: visible; }
#sb77-gallery ul li { list-style:none; display:inline-table; padding:5px; }
#sb77-gallery ul li .pic {
   -webkit-transition: all 0.6s ease-in-out;
   -moz-transition: all 0.6s ease-in-out;
   -o-transition: all 0.6s ease-in-out;
   opacity:0;visibility:hidden;
   position:absolute;
   border:1px solid #52e052;
   -webkit-box-shadow:#272229 2px 2px 10px;
   -moz-box-shadow:#272229 2px 2px 10px;
   filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
   box-shadow:#272229 2px 2px 10px;}

#sb77-gallery ul li .mini:hover { cursor:pointer; }
#sb77-gallery ul li:hover .pic {
   width:550px;
   height:350px;
   opacity:1;
   visibility:visible;
   float:right;}
</style>

<div id="sb77-gallery">
      <ul>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini"  width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li>.......dan seterusnya..</li>
//tambahkan jika memuat gambar lebih banyak lagi..
...
    </ul>
</div>

II. Ganti URL gambar dengan URL gambar anda
III. Sentuh gambar dengan mouse pada tombol DEMO SHOW dibawah ini:





DEMO SHOW


SHOW GALLERY EFFECT

➟ Membuat Koleksi Gambar Hover Efek Zoom Right
➟ Perpindahan Slide Gambar Tanpa Lompatan
➟ Kumpulan Ragam Efek Pada Gambar

HAPPY BLOGGING