0 Membuat Image Galery Menggunakan CSS3

Pada kesempatan hari ini saya akan membahas tentang tutorial jQuery dengan judul artikelnya adalah

Membuat Image Galery Menggunakan CC3

Pastinya tutorial ini sangat menarik untuk di tempatkan di dalam pstingan blog anda, karena tidak akan di taruh di edit html template tetapi di edit html yang ada pada editor postingan, gambar juga bisa di ganti atau di ubah dengan gambar keinginan anda seperti koleksi foto keluarga dan foto lainnya. Image gallery dengan menggunakan css3 sangat menarik bagi saya tampilannya karena mempunyai  efek hover dengan pembesaran yang sesuai.

Coba Lihat contoh Galery Gambar di bawah ini :

• 
• 
• 
• 
• 
• 
• 
• 

Maaf fotonya kurang, habisnya ngga sempat upload foto,.hehe

Baiklah, Jika anda tertarik untuk membuat Image Gallery CSS3 seperti contoh di atas soba 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://www.vivanews.com/appaux/kanalone/skins/images/skin_cosmo.jpg)}

    ul.gambar li{ position:absolute; top:50%; left:50%; padding:6px 6px 
40px 6px; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdeezrBOtDHeqU8Lyio2mOsqe5ZDlA7RfmdzJKaFSOcqPmfRfA6S-WPX6EdnQNv_wVVdBKhIFwdjYOfC6WtJjggvzqkcGFlx1eet5aRoReHIqJ99oXyA3NjLdrE8hBFQxYXYp1JLU-2No/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="LINK GAMBAR" title="#" width="480" /> </li><li> <img height="322" src="LINK GAMBAR" title="#" width="480" /> </li><li><img height="322" src="LINK GAMBAR" title="#" width="480" /></li><li><img height="322"src="LINK GAMBAR" title="#" width="480" /></li><li><img height="322" src="LINK GAMBAR" title="#" width="480" /></li><li><img height="322" src="LINK GAMBAR" title="#" width="480" /></li><li><img height="322" src="LINK GAMBAR" title="#" width="480" /></li><li><img height="322" src="LINK GAMBAR" title="#" width="480" /> </li></ul>

Keterangan:
!important; background:url(http://www.vivanews.com/appaux/kanalone/skins/images/skin_cosmo.jpg)} Link Gambar Background yang berwarna Merah ganti dengan Link Gambar Background Anda.

Lalu Tulisan yang berwarna Biru ganti dengan Link Gambar Anda atau Koleksi Foto Anda. KLIK DISINI jika ingin Upload foto.

Selamat mencoba dan Semoga berhasil,,,,,,,,,

Mohon Beri Komentar Pada Artikel ini, Terima kasih