Membuat Koleksi Gambar Hover Efek Zoom Right - Membuat efek gambar banyak yang sudah membahasnya dalam sebuah tutorial. Dari efek berputar, skew, fade in dan fade out dan membuat efek zoom hover, jadi ini hanya sebagai dokumentasi saja yang akan saya bagikan kepada sahabat pecinta SAHABAT BLOGGER 77. Tidak jauh berbeda saat Anda membaca beberapa artikel tentang gambar hover efek zoom pada artikel saya sebelumnya seperti pada tab dibawah ini






Namun kali ini koleksi gambar sedikit akan saya buat berbeda dengan style efek zoom right (Gambar akan membesar pada sisi kanan), jika pada artikel sebelumnya hanya menggunakan Upload gambar dari picasa album, kali ini saya menggunakan kode lorempixel="image.Update", secara detail koleksi gambar yang saya susun akan selalu terUp-date, singkatnya gambar akan selalu berubah-ubah, jika saat ini anda melihat gambar "Kucing" saat zoom hover pada tombol DEMO SHOW dibawah ini



DEMO SHOW



Maka, coba klik kembali tombol DEMO SHOW diatas, maka gambar kucing yang Anda lihat tadi akan berganti dengan gambar Harimau atau Kuda dan begitu seterusnya..!!

Effect Image


Mau Mencoba membuat koleksi gambar seperti diatas, yukk.. kita susun dulu kode pembangun CSS efek zoom gambar seperti berikut


ul {
  margin: 0;
  list-style: none;
  width: 300px;
  height: 308px;}

ul:after {
  clear: both;
  content: "";
  display: table;}

li {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  background: url(...patterns/pw_maze_white.png);
  cursor: pointer;}

li:nth-of-type(3n+1) {clear: both;}
img {
  position: absolute;
  display: block;
  clip: rect(0, 100px, 100px, 0);
  -webkit-transition: all 0.2s ease-out, z-index 0s;
  -moz-transition: all 0.2s ease-out, z-index 0s;
  transition: all 0.2s ease-out, z-index 0s;
  opacity: 0.9;
}

li:hover img {
  clip: rect(0, 300px, 300px, 0);
  z-index: 2;
  opacity: 1;}

li:nth-of-type(3n+1):hover img {left: 310px;}
li:nth-of-type(3n+2):hover img {left: 210px;}
li:nth-of-type(3n):hover img {left: 110px;}
li:nth-of-type(n+4):nth-of-type(-n+6):hover img {top: -100px;}
li:nth-of-type(n+7):nth-of-type(-n+9):hover img {top: -200px;}


Agar memudahkan Anda, disini saya sudah siapkan beberapa link URL-Gambar yang natinya Anda gunakan pada saat penggunaan kode HTML

http://lorempixel.com/300/300/sports
http://lorempixel.com/300/300/animals
http://lorempixel.com/300/300/abstract
http://lorempixel.com/300/300/nightlife
http://lorempixel.com/300/300/city
http://lorempixel.com/300/300/food
http://lorempixel.com/300/300/people
http://lorempixel.com/300/300/nature
http://lorempixel.com/300/300/fashion


HTML Support
<ul>
<li><img src=".../sports/" /></li>
<li><img src=".../animals/" /></li>
<li><!...!></li>
<li><!...!></li>
<li><!...!></li>
// dan seterusnya.....
</ul>


Bagaimana, tidak sulit bukan.?? hehehe..
Semoga tutorial ini membuat Anda betah bertamu di blog SAHABAT BLOGGER 77. Happy blogging dan sampai jumpa...


TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Koleksi Gambar Hover Efek Zoom Right
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 =

16 komentar

  1. Bikin ngiler aja . Btw tambah berat gak loadingnya.

    BalasHapus
    Balasan
    1. gunakan pixel gambar s.400 dengan posisi: 0 100px 0 100px; atau boleh up-load dari picasa biar gak berat

      Hapus
    2. Saya jadi terpikat dengan trik ini Mbak Devy ikutan nyoba nih :)

      Hapus
  2. Menarik Mbak Devi Artikel Koleksi gambar hover ini,
    Trik ini bisa membuat gambar di blog bisa lebih Hidup yah Mbak
    Saya coba buat blog saya. terima kasih atas tutorialnya Mbak Devy :)

    BalasHapus
  3. wah... sepertinya ini cocok diterapkan nih.. ijin coba2 bos, hehehe....

    BalasHapus
  4. wow keren banget demonya,izin mencoba saya terapkan mbak devy

    BalasHapus
  5. Wahh tutorial yang mbak berikan keren keren bingitt :D Patut dicoba nih :)

    BalasHapus
  6. jadi tambah besar ya gambar postingan nya kalau dipasang efek hover ini, menarik kak tutorial nya, bisa dicoba ;)

    BalasHapus
  7. Hemm cukup menarik.. perlu di coba ne

    BalasHapus
  8. cara pemasangannya ?

    BalasHapus
    Balasan
    1. CSS letakkan diatas atau sebelum kode ]></b:skin> namun bisa juga pada kode <style>, HTML terserah mau doletakkan dimana, jika pada postingan letakkan pada tulisan mode HTML (bukan Compose)

      Hapus
  9. mbak dev, CSS tuh diotak-atiknya di edit html juga bukan mbak? Ga paham saya istilah CSS ini >.<

    BalasHapus
  10. saya juga dulu belum paham mbak,karena sering bertanya jadinya sekarang lebih dapat menguasai akan kode-kode HTML,

    begini mbak, CSS merupakan kode pembangun dalam wilayah tertentu dalam HTML,namun CSS juga dalam wilayah HTML, jadi CSS ini tergantung ingin membuat apa, kita contohkan saja kita ingin membuat suatu efek gambar seperti diatas, maka tempatkan hanya kode CSS dalam wilayah HTML sebelum kode ]]></b:skin>, kalau untuk HTML letakkan saat kita ingin membuat postingan baru mode HTML ketik,bukan yang Compose

    BalasHapus
  11. salam kenal gan
    artikel yang sangat menarik dan bermanfaat gan
    lanjutkan terus gan

    terima kasih

    BalasHapus
  12. Caranya mudah sekali, aku lihat demonya keren dan mantap

    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