Memuat Halaman
"Membuat Gallery Image Menggunakan CSS3"
Koneksi lambat? | Gunakan blog dalam versi mobile.
Tetap berusaha terhubung dengan Adityas Blog
Coba gunakan blog dalam versi mobile atau tekan F5 untuk memuat ulang halaman.

Membuat Gallery Image Menggunakan CSS3

Gallery Image Menggunakan CSS3
Kembali lagi dengan tips dari CSS3, untuk tips kali ini Adityas Blog akan membagikan tutorial membuat gallery image yang hanya menggunakan CSS3.
Ini akan terlihat seperti lightbox pada umumnya tetapi di sini kita hanya menggunakan trik di dalam CSS3 tanpa menggunakan javascript dan sebagainya.

Untuk melihat hasil kerja dari tutorial ini, tekan button DEMO

CSS Gallery ini dapat anda kembangkan kembali sesuai dengan kebutuhan
Bagi anda yang ingin berkreasi silahkan di copy paste kode CSSnya di bawah ini.

CSS Kode

#images-box {
 width: 560px;
 margin:120px auto 0;
 position: relative;
 height: 186px;
}

.holder {
 width: 250px;
 height: 166px;
 float: left;
 margin: 0 20px 0 0;
}

.image-lightbox img {
 width: inherit;
 height: inherit;
 z-index: 3000;
}

.image-lightbox {
 width: inherit;
 height: inherit;
 padding: 10px;
 box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
 background: #fff;
 border-radius: 5px;
 position: absolute;
 top: 0;
 font-family: Arial, sans-serif;
 -webkit-transition: all ease-in 0.5s;
 -moz-transition: all ease-in 0.5s;
 -ms-transition: all ease-in 0.5s;
 -o-transition: all ease-in 0.5s;
}

.image-lightbox span {
 display: none;
}

.image-lightbox .expand {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 z-index: 4000;
 background: rgba(0,0,0,0);
 left: 0;
}

.image-lightbox .close{
 position: absolute;
 width: 20px; height: 20px;
 right: 20px; top: 20px;
}

.image-lightbox .close a {
 height: auto; width: auto;
 padding: 5px 10px;
 color: #fff;
 text-decoration: none;
 background: #22272c;
 box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
 border-radius: 5px;
 font-weight: bold;
 float: right;
}

.image-lightbox .close a:hover {
 box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}

div[id^=image]:target {
 width: 450px;
 height: 300px;
 z-index: 5000;
 top: 50px;
 left: 200px;
}
div[id^=image]:target .close {
 display: block;
}

div[id^=image]:target .expand {
 display: none;
}

div#image-1:target, div#image-2:target{ left: 57px; }

div#image-1 { left: 0; }
div#image-2 { left: 290px; }

HTML Kode

<div id="images-box">
   <div class="holder">
      <div class="image-lightbox" id="image-1">
         <span class="close"><a href="#!">X</a></span>
            <img src="https://lh6.googleusercontent.com/-Qd6ZIbeGFIM/TWAyZTKMZHI/AAAAAAAAAPc/4LbmfM4hoYw/s320/nokia_kinetic_1.jpg" />
            <a class="expand" href="#image-1"></a>
      </div>
   </div>
   <div class="holder">
      <div class="image-lightbox" id="image-2">
         <span class="close"><a href="#!">X</a></span>
            <img src="https://lh3.googleusercontent.com/-hpP2tl1uda8/T1cfzjL5khI/AAAAAAAAAXo/3XYbv607zCA/s320/nokia-lumia-800-wp7-review-0.jpg" />
            <a class="expand" href="#image-2"></a>
      </div>
   </div>
</div>

Selamat Belajar dan Semoga Bermanfaat Bagi Kawan Blogger Indonesia

Gabung ke group:

Artikel Terkait

9 Respon Komentar

June 26, 2012 at 10:16 PM

cara masukin css3 nya gimana gan,, apa Langsung masuk ke edit HTML.??
ini kodding gallery untuk blogger kan.??

June 26, 2012 at 11:18 PM

@Fadli Muhammad el-mughni itu cuma kode css dasar untuk gallery image gan..
tidak di bikin khusus untuk blogspot..

klo mau di kembangkan baru bisa gan.. :e:

apk-andro, said...
September 22, 2012 at 12:55 PM

info yg mantap...
mampir gan

September 30, 2012 at 8:05 PM

@apk-andro Mari mari gan... :D

yousake, said...
November 15, 2012 at 10:55 AM

singgah sejenak kemari kawan, sambil menyapa admin blog ini. ^_^

Direktori WeBlog, said...
November 28, 2012 at 11:22 PM

Makasih sharingnya, gan! Blognya bagus bgt.
Salam kenal dan kalau sempat mampir dan submit url blognya di blog direktori saya, gan. :)

Hasna Wijaya, said...
March 27, 2013 at 8:24 PM

matapdah .. ijin sedot gan

A Wahyu Hidayat, said...
April 13, 2013 at 12:31 PM

mantab sob, ijin simpan cssnya

kristina young, said...
September 13, 2017 at 7:34 PM

I found the blog some what interesting in its content wise and easier to understand what they had said. I love if you publish the blogs often.
Pawn Shop
Pawn Shops in Alabama
Pawn Brokers
Pawn Loans
Pawn Loans in Alabama
Pawn Shops near me

Tinggalkan Komentar Anda?

Komentar anda akan dihapus jika :
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar

:a: :b: :c: :d: :e: :f:
:g: :h: :i: :j:

Emotion lainnya?