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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Gambar Dengan Efek Zoom Hover CSS3
Ditulis oleh= Devy
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 =

12 komentar

  1. Balasan
    1. Cewek-cewek begini dapat jodoh cocoknya sama anak HTML juga heheh

      Hapus
    2. silahkan langsung diciduk bang... :>)

      Hapus
  2. Info Yang Menarik Makasih Kak devy

    BalasHapus
  3. keren nih efeknya sist devy .. :D

    BalasHapus
    Balasan
    1. masih dalam tahap pembelajaran kok sist friska,,kan dapat ilmunya dari sist juga,, :-?

      Hapus
  4. asyik juga ya kalau gambar postingan nya bisa ada zoom nya. Jadi bisa terlihat jelas dan mudah dibaca dan dipahami oleh para pengunjung. Boleh dicoba nich tutorialnya :)

    BalasHapus
    Balasan
    1. (f) mungkin bagi yang berminat saja mbak rin..
      hehehe...

      terimakasih kunjungannya mbak

      Hapus
  5. asik asik info yang menarik bisa di buat belajar

    BalasHapus
  6. tank buat ilmunya udah cantik bisa main web lgi....... top like this

    BalasHapus
  7. Wes Gak Tembus mbak..... memang top deh cewek satu ini :D

    BalasHapus
  8. terima kasih artikelnya gan.. lengkap lagi sama demonya...
    zoomnya bekerja waktu dicoba pada blog saya.. sukses selalu..
    ditunggu kunjungan baliknya..

    http://miniblogger28.blogspot.com

    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