Membuat Koleksi Gambar Hover Efek Zoom Right

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

Efek Gambar

• Remote Link Effect
• Zoom Hover CSS3
• Flip 3D Image

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

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