Image Gallery With CSS3

CSS3 lagi?? owh shit man.... Asyik nih saya tulis lagi tentang css3 yang keren abis dah, kali ini css3-nya tentang Image Gallery. Sebenarnya trik css3 kali ini menggunakan efek hover yang apabila disentuh akan memperbesar atau berubah bentuk. Dari pada pusing baca penjelasan saya yang g jelas mendingan kita lihat demonya yuk.

Nah kode yang saya pakai untuk menampilkan image Gallery With CSS3 adalah sebagai berikut

Css yang di pakai :

.box {
z-index: 1;
position: relative;
padding: 3px;
width: 125px;
height: 125px;
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-transform: rotate(-15deg);
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-15deg);
}

.box:hover {
z-index: 2;
position: relative;
-moz-transform: rotate(0deg);
-moz-transform: scale(1.25);
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.25);
}
nah untuk diatas adalah kode css-nya apabila sobat ingin memasang-nya di template sobat tinggal tambahkan saja kode tersebut di atas kode ]]></b:skin> dan simpan deh selesai namun efek tersebut tidak akan berfungsi apabila kode css tersebut tidak di panggil. Jadi untuk memanggilnya kita gunakan class="box1" pada HTML, contoh seperti di bawah ini

<div class="box1">
<img src="Alamat-Gambar-Sobat" />
</div>

nah kurang lebih seperti itu, biar jelas silahkan sobat coba jadi jangan cuman baca saja nanti malah g bisa, oiya kalau sobat ingin mempelajari lengkap tentang css3 sobat bisa kunjungin css.info . Sekarang tugas saua selesai, dan saya mau pamit kurang lebihnya di maafkan y. Terima kasih dan Salam OT .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg Lintasme