CARA MEMBUAT GALLERY IMAGE DENGAN CSS3

Translate

GALLERY IMAGE DENGAN CSS3

• 

Berbicara CSS kedengarannya sangat menarik sekali, karena dengan menggunakan CSS tentunya akan banyak menghasilkan triks-triks yang bagus misalnya yang sedang saya bahas sekarang ini mengenai cara membuat image/foto gallery menggunakan CSS3. Tutorial menggunakan CSS yang disajikan sekarang ini sangat menarik sekali apalagi ditempatkan di blog, misalnya dengan koleksi foto-foto pacar anda, entah sudah berapa banyak wanita yang kalian pacari, tentunya sangat tepat untuk ditempatkan di blog anda sebagai koleksi album atau photo galeri.


Yang lebih menarik lagi dari image gallery dengan css3 yaitu adanya efek hover yang apabila mouse didekatkan atau diarahkan ke gambar atau foto gallery maka foto/gambar tersebut akan membesar. Cukup menarik bukan? Belum terlihat menarik kalau belum anda yang mencobanya.

Bagaimana cara membuat image/photo gallery menggunakan CSS3? Caranya mudah, anda hanya membuat sebuah postingan dan tempatkan kode-kode yang akan saya berikan pada postingan anda dalam posisi HTML, cukup paham bukan? Ok sekaran anda coba arahkan kursor mouse anda ke gambar dibawah ini untuk melihat hasilnya.

• 
• 
• 
• 
• 
• 
• 
• 

Ini kode CSS3 efek hover untuk galllery photo yang harus anda masukkan di dalam postingan anda, ingat harus posisi HTML ya?

<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);   &nbsp: -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/AVvXsEiJPUak57rfuo6QMZw8ZYyeKl32z0ASCyahyphenhyphen-uhY5Cpumjn8w8y6Kymrf5JzvkNrTENfeiiFWF2nJ8JNYzHkZMlvo_dJK6rI2BUfLAFWA1einbBGoljyxK8LlQ0mKX_O5t3kck0nYYdxMw/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/AVvXsEjfY3OO79Yebzt5swa5loaQAIpujupBV88ywv6-aRNaK0sye0p8vx3nbi_6piOgts-g_a06T5_KlAgXhaaLOU6hx-Hwd0P7pYWUCzupripCdnTHEMM5jKrSIoE3SrJCsx_RFtinoA8xQlg/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..

Semoga postingan Cara Membuat Gallery Image / Photo Dengan CSS3 dapat bermanfaat untuk anda, happy blogging ...

Edit; wawansurya
Sumber ;
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com

merchant