Trik Membuat Galeri Image Dengan CSS3
ILALANGWeBloG, Jakarta - Caranya mudah, kita sebelumnya telah membuat sebuah postingan dan tempatkan
kode-kode yang akan kita berikan pada postingan dalam posisi HTML.
Ini kode CSS3 efek hover untuk galllery photo yang harus kita masukkan di dalam postingan, ingat harus dalam posisi HTML.
<style type="text/css">
ul.gambar{padding:230px; border:3px solid #000; position:relative; list-style:none;-webkit-box-shadow:7px 4px 10px rgba(0,0,0,.4); -moz-box-shadow:7px 4px 10px rgba(0,0,0,.4);  : -moz-border-radius:20px; -webkit-border-radius:20px; background:-webkit-gradient(radial,45 45,50,50 10,640,from(#444),to(#333)) !important; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz-xeWC6KjRhhx8okAyI6AQ7m4JSBBCx_YBvuioR_O7qkp-Hh4-e29gXgRG8HKBJNzkqoEhaRyaeAaQqGQvCKQVjLD6MgZXPxF37ZPbLgBbnLuZBtQ06LMF8nd9DbDqYnzxjEpAnodizY/s200/batuakik.jpg)}
ul.gambar li{ position:absolute; top:50%; left:50%; padding:6px 6px 40px 6px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3tfDEZyuyLs6AgfD6cPnJjUPLcuDoMEV9vFUTCtHehMyA-gnp8QBW2P7H7Uk6GzuLJUWujoRpuDlFLRwp_mjOE_ZpkCFdh0S4xh-GO0_f5OdM-SE6IDEF_1jrsq_tTany0m9LE86MBiE/s320/granitetilemed.png); width:150px; height:120px; -moz-border-radius:15px; -webkit-border-radius:15px; -moz-box-shadow:1px 1px 6px #222; -webkit-box-shadow:1px 1px 6px #222; box-shadow:1px 1px 6px #222; -webkit-transition:all 3s ease-in-out; z-index:0}
ul.gambar li img{ width:100%; height:100%}
ul.gambar li:nth-child(1){ margin-top:-130px; margin-left:-130px; -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); transform:rotate(30deg)}
ul.gambar li:nth-child(2){ margin-top:-120px; margin-left:-10px; -moz-transform:rotate(19deg); -webkit-transform:rotate(19deg); transform:rotate(19deg)}
ul.gambar li:nth-child(3){ margin-top:-10px; margin-left:-180px; -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); transform:rotate(-10deg)}
ul.gambar li:nth-child(4){ margin-top:-50px; margin-left:-80px; -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg); transform:rotate(12deg)}
ul.gambar li:nth-child(5){ margin-top:20px; margin-left:30px; -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); transform:rotate(-20deg)}
ul.gambar li:nth-child(6){ margin-top:-210px; margin-left:-280px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg)}
ul.gambar li:nth-child(7){ margin-top:20px; margin-left:150px; -moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); transform:rotate(-20deg)}
ul.gambar li:nth-child(8){ margin-top:-190px; margin-left:90px; -moz-transform:rotate(19deg); -webkit-transform:rotate(19deg); transform:rotate(19deg)}
ul.gambar li:hover{ z-index:10; width:480px; height:322px; margin-top:-170px; margin-left:-240px; -webkit-transition:opacity; -moz-box-shadow:8px 8px 24px #111; -webkit-box-shadow:8px 8px 24px #111; box-shadow:8px 8px 24px #111; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg)}
</style><br />
<ul class="gambar">
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /> </li>
<li> <img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /> </li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /> </li>
</ul>
ul.gambar{padding:230px; border:3px solid #000; position:relative; list-style:none;-webkit-box-shadow:7px 4px 10px rgba(0,0,0,.4); -moz-box-shadow:7px 4px 10px rgba(0,0,0,.4);  : -moz-border-radius:20px; -webkit-border-radius:20px; background:-webkit-gradient(radial,45 45,50,50 10,640,from(#444),to(#333)) !important; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz-xeWC6KjRhhx8okAyI6AQ7m4JSBBCx_YBvuioR_O7qkp-Hh4-e29gXgRG8HKBJNzkqoEhaRyaeAaQqGQvCKQVjLD6MgZXPxF37ZPbLgBbnLuZBtQ06LMF8nd9DbDqYnzxjEpAnodizY/s200/batuakik.jpg)}
ul.gambar li{ position:absolute; top:50%; left:50%; padding:6px 6px 40px 6px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3tfDEZyuyLs6AgfD6cPnJjUPLcuDoMEV9vFUTCtHehMyA-gnp8QBW2P7H7Uk6GzuLJUWujoRpuDlFLRwp_mjOE_ZpkCFdh0S4xh-GO0_f5OdM-SE6IDEF_1jrsq_tTany0m9LE86MBiE/s320/granitetilemed.png); width:150px; height:120px; -moz-border-radius:15px; -webkit-border-radius:15px; -moz-box-shadow:1px 1px 6px #222; -webkit-box-shadow:1px 1px 6px #222; box-shadow:1px 1px 6px #222; -webkit-transition:all 3s ease-in-out; z-index:0}
ul.gambar li img{ width:100%; height:100%}
ul.gambar li:nth-child(1){ margin-top:-130px; margin-left:-130px; -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); transform:rotate(30deg)}
ul.gambar li:nth-child(2){ margin-top:-120px; margin-left:-10px; -moz-transform:rotate(19deg); -webkit-transform:rotate(19deg); transform:rotate(19deg)}
ul.gambar li:nth-child(3){ margin-top:-10px; margin-left:-180px; -moz-transform:rotate(-10deg); -webkit-transform:rotate(-10deg); transform:rotate(-10deg)}
ul.gambar li:nth-child(4){ margin-top:-50px; margin-left:-80px; -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg); transform:rotate(12deg)}
ul.gambar li:nth-child(5){ margin-top:20px; margin-left:30px; -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); transform:rotate(-20deg)}
ul.gambar li:nth-child(6){ margin-top:-210px; margin-left:-280px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg)}
ul.gambar li:nth-child(7){ margin-top:20px; margin-left:150px; -moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); transform:rotate(-20deg)}
ul.gambar li:nth-child(8){ margin-top:-190px; margin-left:90px; -moz-transform:rotate(19deg); -webkit-transform:rotate(19deg); transform:rotate(19deg)}
ul.gambar li:hover{ z-index:10; width:480px; height:322px; margin-top:-170px; margin-left:-240px; -webkit-transition:opacity; -moz-box-shadow:8px 8px 24px #111; -webkit-box-shadow:8px 8px 24px #111; box-shadow:8px 8px 24px #111; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg)}
</style><br />
<ul class="gambar">
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /> </li>
<li> <img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /> </li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /></li>
<li><img height="322" src="URL Gambar Anda" title="isi dengan titel gambar" width="480" /> </li>
</ul>
Keterangan :
- Teks warna merah silahkan anda ganti dengan url gambar atau image anda sendiri dan beri titel
- Hasilnya akan terlihat seperti gambar di atas. Selamat mencoba.
Contohnya lihat DISINI
0 comments :
Ads 2
Ads 2
Post a Comment
Mari Kita berdiskusi, apa pendapatmu. Ditunggu komentarnya kawan