Membuat Efek Zoom-Zoom pada Photo Gallery
Ini adalah Sebuah metode untuk mengontol pembesaran dari serangkaian gambar yang dapat menampilkan zoom Gambar dalam ukuran penuh.
Dengan gradient zoom ini Anda dapat menggerakan cursor ke kiri/ kanan di antara gambar untuk memperbesar gambar yang berdekatan.
Demo Efek Zoom-Zoom :
Foto di ambil saat saya Touring menuju Pantai Sawarna, Kec. Bayah, Kab. Lebak - Banten
Letakan Cursor pada Gambar, Gerakkan Cursor Kekiri/ Kanan...
More Detail :
Terlebih dahulu DOWNLOAD Kode CSS berikut ini: CSS3Zoom-Zoom.css, Letakan kedalam tag <head> template anda kemudian save template. Gunakan Kode HTML dibawah ini untuk menampilkan Photo Gallery dengan Efek Zoom-Zoom pada halaman website anda.
Kode HTML tersebut dapat anda letakan kedalam tag <body> dan untuk gambar dan link yang akan anda gunakan, silahkan lihat cara penempatannya dalam kode HTML pada text yang sudah diberi warna merah dan kuning.
Kode HTML
<h2>Efek Zoom-Zoom pada Photo Gallery</h2>
<div class="gallery">
<a class="p1" href="http://caprt3a.blogspot.com"></a><a class="p2" href="https://caprt3a.blogspot.com"></a><a class="p3" href="https://caprt3a.blogspot.com"></a><a class="p4" href="https://caprt3a.blogspot.com"></a><a class="p5" href="https://caprt3a.blogspot.com"></a><a class="p6" href="https://caprt3a.blogspot.com"></a><a class="p7" href="https://caprt3a.blogspot.com"></a>
<div class="images">
<img class="n1" src="zoooom/pic1.jpg" alt="" /><img class="n2" src="zoooom/pic2.jpg" alt="" /><img class="n3" src="zoooom/pic3.jpg" alt="" /><img class="n4" src="zoooom/pic4.jpg" alt="" /><img class="n5" src="zoooom/pic5.jpg" alt="" /><img class="n6" src="zoooom/pic6.jpg" alt="" /><img class="n7" src="zoooom/pic7.jpg" alt="" />
</div>
</div>
<div class="gallery">
<a class="p1" href="http://caprt3a.blogspot.com"></a><a class="p2" href="https://caprt3a.blogspot.com"></a><a class="p3" href="https://caprt3a.blogspot.com"></a><a class="p4" href="https://caprt3a.blogspot.com"></a><a class="p5" href="https://caprt3a.blogspot.com"></a><a class="p6" href="https://caprt3a.blogspot.com"></a><a class="p7" href="https://caprt3a.blogspot.com"></a>
<div class="images">
<img class="n1" src="zoooom/pic1.jpg" alt="" /><img class="n2" src="zoooom/pic2.jpg" alt="" /><img class="n3" src="zoooom/pic3.jpg" alt="" /><img class="n4" src="zoooom/pic4.jpg" alt="" /><img class="n5" src="zoooom/pic5.jpg" alt="" /><img class="n6" src="zoooom/pic6.jpg" alt="" /><img class="n7" src="zoooom/pic7.jpg" alt="" />
</div>
</div>
sumber: cssplay
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon