Membuat Box Image Galery dengan CSS3

• 
• 
• 
• 
• 
• 
• 
• 

 
Untuk membuat Image Gallery CSS3 seperti contoh di atas anda tinggal memasukkan kode di bawah di dalam postingan dan di Gadget baru blog anda:

 <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(http://i56.tinypic.com/257inmb.gif)}
ul.gambar li{ position:absolute; top:50%; left:50%; padding:6px 6px
40px 6px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoNFD63Fxzoj6ULiKV4HFfejPMII1UzrGSH_tImRVqUaAd21ihNvlFdYU9m3DrttSZo6UGghuvRa6bvOjTaf8E9iyFlr0DXz5Bkp6A0cBERSq_fEEYAqnGFws2ZalHRpC4AuwiEb5LTlo/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><ul class="gambar"><li><img height="322" src="URL-GAMBAR" title="TITLE-GAMBAR" width="480" /> </li><li> <img height="322" src="URL-GAMBAR" title="TITLE-GAMBAR" width="480" /> </li><li><img height="322" src="URL-GAMBAR" title="TITLE-GAMBAR" width="480" /></li><li><img height="322"src="URL-GAMBAR" title="TITLE-GAMBAR" width="480" /></li><li><img height="322" src="URL-GAMBAR" title="TITLE-GAMBAR" width="480" /></li><li><img height="322" src="URL-GAMBAR" title="TITLE-GAMBAR" width="480" /></li><li><img height="322" src="URL-GAMBAR" title="TITLE-GAMBAR" width="480" /></li><li><img height="322" src="URL-GAMBAR" title="TITLE-GAMBAR" width="480" /> </li></ul>

NB :
!important; background:url(http://i56.tinypic.com/257inmb.gif) adalah Gambar Background box galeri. dan yang tukisan 'URL-GAMBAR' yang berwarna Merah.adlh gambar yang ingin sobat tampilkan. sedangkan, tulisan 'TITLE-GAMBAR' sobat ganti dengan title gambar sobat masing-masing.

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's

Related Post