Koleksi Gambar dengan Hover Zoom Right

ads here
Koleksi Gambar dengan Hover 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 Expert Blogger. Tidak jauh berbeda saat Anda membaca beberapa artikel tentang gambar hover efek zoom pada artikel saya sebelumnya.

KOLEKSI GAMBAR

Koleksi Gambar dengan Hover Zoom Right


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 Expert Blogger. Happy blogging dan sampai jumpa...

FOLLOW NOW