Desain Gallery Photo Efek Tumpukan

Gallery Photo Stack

Desain Gallery Photo Efek Tumpukan - Setelah sebelumnya SAHABAT BLOGGER 77 sudah membahas tutorial tentang Cara Membuat Gallery Gambar 3 Dimensi pada artikel sebelumnya, kesempatan kali ini saya akan coba memberikan efek yang berbeda pada gambar postingan Anda dengan efek tumpukan. Jika Anda menyimpan lebih dari 7 sampai 10 buah gambar pada tab gallery photo, sudah pasti disana akan membutuhkan tempat yang luas untuk menampilkan semua photo Anda, sehingga untuk menghemat space saya sudah membuat Desain Gallery Photo Dengan Efek Tumpukan untuk menyimpan semua koleksi photo Anda layaknya dalam sebuah album gambar.

Efek tumpukan (stack effect) pada sebuah gambar photo seperti ini merupakan cara untuk merapikan susunan gambar dengan jumlah yang banyak agar tampil dalam 1 frame gallery, namun semua gambar dapat ditampilkan dengan pointer hover (sentuhan panah mouse) seperti ini:




DEMO SHOW



Seperti Efek Keyframes Show Pada Gambar Hover yang menampilkan semua koleksi photo hanya jika panah mouse Anda berada diatasnya. Untuk desain gallery photo kali ini, saya membuat tumpukan gambarnya dengan efek-skew (gambar miring) seperti ini:

PENERAPAN KE BLOG
Saatnya melakukan percobaan. Untuk menyelesaikan pekerjaan Anda, terlebih dahulu siapkan gambar photo Anda, selanjutnya COPY URL-gambarnya lalu ganti teks yang saya beri warna MERAH dengan URL-Gambar Anda pada HTML berikut:

<ul class="gallery">
<li class="img1"><a href="#"><img alt="" src="URL-Gambar Anda.jpg"></a></li>
<li class="img2"><a href="#"><img alt="" src="URL-Gambar Anda.jpg"></a></li>
<li class="img3"><a href="#"><img alt="" src="URL-Gambar Anda.jpg"></a></li>
</ul>

Pada tampilan DEMO SHOW, disana saya hanya menampilkan 3 buah photo saja sebagai contoh. Selanjutnya Anda tinggal membuat bentuk tampilan gallery photo dengan pengaturan CSS dibawah ini, namun sesuaikan tata letak gambarnya jika Anda ingin menyimpan lebih banyak photo lagi sebagai koleksi seperti ini:

<style type='text/css'>
ul.gallery li a img {float: left;width: 200px;}
ul.gallery:hover li.img1, ul.gallery:hover li.img2, ul.gallery:hover li.img3 {
  -webkit-transform: rotate(0deg) translate(0px, 0px);
  -moz-transform: rotate(0deg) translate(0px, 0px);
  -o-transform: rotate(0deg) translate(0px, 0px);
  transform: rotate(0deg) translate(0px, 0px);}

ul.gallery li {
  border: 2px solid #ddd;
  float: left;list-style: none;
  padding: 0;margin: 0 10px 0 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;}

// Tata letak photo gallery...
ul.gallery li.img1 {
  position: relative;z-index: 50;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);}

ul.gallery li.img2 {
  position: relative;z-index: 40;
  -webkit-transform: rotate(3deg) translate(-210px, 0px);
  -moz-transform: rotate(3deg) translate(-210px, 0px);
  -o-transform: rotate(3deg) translate(-210px, 0px);
  transform: rotate(3deg) translate(-210px, 0px);}

ul.gallery li.img3 {
  position: relative;z-index: 30;
  -webkit-transform: rotate(-8deg) translate(-424px, -55px);
  -moz-transform: rotate(-8deg) translate(-424px, -55px);
  -o-transform: rotate(-8deg) translate(-424px, -55px);
  transform: rotate(-8deg) translate(-424px, -55px);}
</style>

Bagaimana.!! pekerjaan yang cukup mudah bukan...!? hehe...
Sampai disini, semua pekerjaan Anda untuk Mendesain Gallery Photo Dengan Efek Tumpukan sudah selesai, saatnya Devy permisi pamit mau bobo siang dulu. bye...guys..!!