3 Style Gallery CSS3 Photo Pinkbox Pada Blog

3 Style Gallery CSS3 Photo Pinkbox Pada Blog – bergilirnya waktu setelah beberapa waktu lalu pernah membuat efek yang sama dengan adanya script jQuery dan menggunakan warna gelap pada sisi gambar yakni pada tutorial yang berjudul jquery gambar efek lightbox pada blog, maka tutorial ini sama pula halnya dengan efek tersebut. Namun yang cukup berbeda adalah pada gallery efek pinkbox ini dengan tanpa adanya script jquery dan pada opacity lightbox yang berwarna terang di sekeliling gambar dengan 3 style yang berbeda sehingga bagi yang ingin menggunakan dapat memilih satu di antara 3 atau bahkan semuanya dari efek gambar pinkbox yang ada. Tampilan default gallery gambar akan berbentuk thumbnail dan jika pada gambar tersebut di klik maka akan muncul gambar dengan ukuran/size aslinya dari gambar tersebut yang tentunya gambar jauh lebih besar dari ukuran thumbnail. Untuk membuat gallery gambar efek pinkbox ini cukup mudah di terapkan kedalam blog. Sebelum memulai ke tutorial lebih lanjut bisa juga jika ingin melihat tampilannya terlebih dahulu gallery photo ini jika di pasang kedalam blog, dengan cara klik tombol demo yang ada dibawah. Selanjutnya setelah memilih satu dari 3 style yang disukai, maka berikut adalah tutorialnya untuk cara memasang 3 Style Gallery CSS3 Photo Pinkbox Pada Blog:

Demo Style #1

1. Login ke akun blogger.
2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).

ol,ul {list-style:none;}
.lb-album{
width: auto;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: left;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
width: 550px;
margin: 10px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
-webkit-transition: opacity 0.3s linear 1.3s;
-moz-transition: opacity 0.3s linear 1.3s;
-o-transition: opacity 0.3s linear 1.3s;
-ms-transition: opacity 0.3s linear 1.3s;
transition: opacity 0.3s linear 1.3s;
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
text-align: left;
float: left;
width: 260px;
}
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-webkit-transition: opacity 0.3s linear 1.2s;
-moz-transition: opacity 0.3s linear 1.2s;
-o-transition: opacity 0.3s linear 1.2s;
-ms-transition: opacity 0.3s linear 1.2s;
transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
/* height: 100%; For Opera max-height does not seem to work */
max-height: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
-webkit-animation: fadeInScale 1.2s ease-in-out;
-moz-animation: fadeInScale 1.2s ease-in-out;
-o-animation: fadeInScale 1.2s ease-in-out;
-ms-animation: fadeInScale 1.2s ease-in-out;
animation: fadeInScale 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes fadeInScale {
0% { -webkit-transform: scale(0.6); opacity: 0; }
100% { -webkit-transform: scale(1); opacity: 1; }
}
@-moz-keyframes fadeInScale {
0% { -moz-transform: scale(0.6); opacity: 0; }
100% { -moz-transform: scale(1); opacity: 1; }
}
@-o-keyframes fadeInScale {
0% { -o-transform: scale(0.6); opacity: 0; }
100% { -o-transform: scale(1); opacity: 1; }
}
@-ms-keyframes fadeInScale {
0% { -ms-transform: scale(0.6); opacity: 0; }
100% { -ms-transform: scale(1); opacity: 1; }
}
@keyframes fadeInScale {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
x:-o-prefocus, .lb-overlay img {
height: 100%;
}

3. Klik Terapkan ke Blog.

Perlu diperhatikan: Untuk menaruh kode CSS tidak harus seperti pada langkah di atas, cara lain bisa juga dilakukan dengan cara klik Template >> Edit HTML lalu cari kode ]]></b:skin> kemudian paste kode CSS tersebut tepat di atasnya / sebelum kode ]]></b:skin> lalu klik Simpan Template.

4. Langkah selanjutnya klik Entri Baru, lalu copy kode dibawah ini kemudian paste di kolom posting mode HTML.

<ul class="lb-album">
<li>
<a href="#image-1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUW9lS3nDShm6ccUMH6r_D2kOl1SvO2NtrEbLVyKJYqsUqTaIXoMuVpD0_DzBJgk_EVKAt0hbI-jO72A1-CrfjMkr7O3plfuGtB1YqB-juAleIEwrbz3-uy4d3yfoLOPzRTdnVGiAKzlk/s150-no/Thumb+%25289%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSKKLR7KJCyGKV1Yz2dpdWPRyn_R6QopIQABNANdE3z80xCvJqQGIKXtL8BVkENMHVpEqoZQEKd6o-KvmbRRUbSbL6P7B_QQjhl7NreEMKUmYzVfglwUzHwV3IcxLnivuF_MuyexOL3hA/w355-h533-no/foto+%25289%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnS_BTFOt_lGDyYS5JuPZNFoYMY7MiaYBA6oJV2xFEqr-Fz73JpTwh0gdSCTQiL08TR551t5nVxjTF0MB0Li7cCiNrNWYAPBU5xt5YJhmTuUK7S2QAi5eO42p4zxqNjLe5Bz-4KBVDKQ/s150-no/Thumb+%25286%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAPQ5zNXb7FWfeWSA3BVE7U6cZzXoou0rKHfHCv0lR3uMsfanBThjTzJPDbQzxJ_pinMGdEICaogceGMKedT8q_jV_ArUIE7qvodI0TbY_dmqKDmqSjaiynlt9JZl8EeDbR2YyY2AoQY/w355-h533-no/foto+%25286%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbpaEnksLfTImj2XvpGMR-SoCqasBUW7m0jeX27Mdr3k41tI86L6hLpjZ0MJUxkNSnox3P0n4jJV9amwT8VlAC2WCia4cKeE_BABFxEJeor9WTVMHJw6G21JMPMZaDrwrlpVu1o4DxJLw/s150-no/Thumb+%25288%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisar0pvmxfjys6i31ufr_JD7Hbu7-fIOoWG8tMyYtQXlduKtnFmsTWUrJSsM-jj9EOasWkeYgV3m4ZbgRATAj9Rs4MUAPEgSpPRegVc9swKAkc_8KkL_ewAbcmfRyVrDkPkLvTuNunPac/w387-h533-no/foto+%25288%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdt8De8iDgAEzt6I7m7LQpRsnEtu4rYzxur6RjHsfVggfoGr_J2RcWT8lOZduXEShOxlRnUAYUVQRSUmM_15ljWto2Dr6OtJNUiRqPZS8E6IlwXoBbMrOdClXSPUVukLDK0Y5qrtsVlI/s150-no/Thumb+%25282%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAvlZ3ukUxcuBvjm5ZpbAoKkhbok0d7ABEJQ3ehZl-v20D6iWodcnKaZP359w3_ag9jHF6CmY7MSRELJhHGOaarpx5bz3o3I62DIJ1G0iVTFNgjG_ynfdPxC7Y9wtuWdmgkXezJhroZvo/w501-h533-no/foto+%25282%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxV20D5S_4jG22dxceRXhRco4NqpFOFEFvAOFydmetCaAynd5u5727vsIFGwiFLAoEPUTAVkfnF08oeuQVZ34BjcpikU2MAS5DdN4oqYAjqH2HaOo0taCohBsRK9GOQr68CLY_a8yYok/s150-no/Thumb+%25287%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-5">
<a href="#page" class="lb-close">x Close</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAqbxlMrKu-XkUh5uwJf74ppV3r3aBwWwjB85ygd1qZkiTSzanWAch37vp6NMkmUUSUb2cm5eQ2lb9M4higmL6b_23KmQw4Gba3bDtTPFVNPVTCrQLUa-_XeAn9BpWuUUMGG7Wm92aIds/s533-no/foto+%25287%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
</div>
</li>

<li>
<a href="#image-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4SDMHipt4HJltk6EPvfouQPLaurjFpCiAQOjq9grN3DdUtOhroOrSKCA01ofMOfFcN3ESaQigNk8bnNUUnSccihpTE6MzkZfrx_CbXyld7Sug-RTWCAxuur9Y-Y1ZK4vDfUQoQRO3RA/s150-no/Thumb+%25285%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEdR6_tLHYm44LmcKjgqefJg6jywnQMNbJPy52mSi7ueaJHu77mgcI2JyXkz8rXO0U7FyVziK1kS7_PXtTOu6pfu1vc_Dg13DpymVokQ1WimlYKLjWCuspfkXzBU5XIc1R6fT_pfolL3g/w419-h533-no/foto+%25285%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqXV96_R3uI6E202RsvM5ELJlZUlCh1hlmYU7awnThmRghDh0xF1vMLuTG2jsU8AtTJoCZvGrqXfq4llntd2VbORH_9__7YUshcm3fUbU-WYHQomoKvvAJqPEv1XpTNU5vrtRHuzsd2M/s150-no/Thumb+%25284%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3bM7O7fawA2rXHYz2kgBe7CHpIbe-wqaGYCZHQQzM4HjDOWBd5rImrWcJFb2G0AtrMfq9zEsG3s6XiwQpDX_Are2JNftF_4rs3XVy0o07Dbm6Cs4GpqwrPeawsciwaoBZ1KBgJQIOnk/s533-no/foto+%25284%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-8">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqf_-1IxzQSzNn1QC4WrzSBmYLxt_qZWcy5PtTU_oeqCEXVDwiHXah8846aHN45uevWSA7rXVoS_L0IdFYWFyKw_d68SoL0YRNCPqAudHcwqITloohekkNEtTxQP1ljvB6etlrqWOUKA/s150-no/Thumb+%25283%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-8">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceXpy7m17Y34y9XNpBw0ItBrbYn0AmtBRJrp7_nbwmibw3JTbJwkQ9jUYEJ1TM6jhbYfmf_IQis6XfOnyylo3IZmezdxryeUlV2DxdEI5IrnUfRt9gGy2II35Ar188qcYO1Y5Uvr_SDg/s533-no/foto+%25283%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-9">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzsSURa2N0b-0Bhp0Vp7UllqkpEADxEYOdpByVwP3EXaU7cwNBjba1ujpjMzfFzEPCrWvqHScqKf5AHZAjSDRFfl0Z4oTtp9Sj1PQsOJ-uOsYmNV4ZuAfp1zaVBP9wI99BuPUmPUVKw4w/s150-no/Thumb+%25281%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-9">
<a href="#page" class="lb-close">x Close</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimA1BLGyc0-B224DRKX9eYoLkGsIYBIzel8bQvjQwZ1dffSE-UnwM7Ql_bC8n7jAFn68NhIxlx8xasApkVnguzKbgXYLMSDoJeZfpbBAWOaRxDIs-sORnL9-MbUR66XKpiXEb44oOEpw/w355-h533-no/foto+%25281%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
</div>
</li>
</ul>

Keterangan:
Ganti URL GAMBAR diatas dengan gambar lain yang di inginkan. Selanjutnya untuk judul dan deskripsi gambar juga jangan lupa sesuaikan. Untuk menambahkan gambar lebih banyak lagi maka caranya copy kode yang berwarna biru, lalu paste sebelum kode berwarna merah.

Tutorial di atas adalah untuk efek PINKBOX STYLE #1, untuk membuat PINKBOX STYLE #2 dan #3 seperti pada halaman demo maka silahkan copy kode dibawah ini dan CARA PEMASANGANNYA SEPERTI LANGKAH DIATAS.

KODE PINKBOX STYLE #2

Demo Style #2

CSS

ol,ul {list-style:none;}
.lb-album{
width: auto;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: right;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
width: 550px;
margin: 10px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
-webkit-transition: opacity 0.3s linear 1.3s;
-moz-transition: opacity 0.3s linear 1.3s;
-o-transition: opacity 0.3s linear 1.3s;
-ms-transition: opacity 0.3s linear 1.3s;
transition: opacity 0.3s linear 1.3s;
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
text-align: left;
float: left;
width: 260px;
}
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-webkit-transition: opacity 0.3s linear 1.2s;
-moz-transition: opacity 0.3s linear 1.2s;
-o-transition: opacity 0.3s linear 1.2s;
-ms-transition: opacity 0.3s linear 1.2s;
transition: opacity 0.3s linear 1.2s;
}
.lb-overlay img{
/* height: 100%; For Opera max-height does not seem to work */
max-height: 100%;
position: relative;
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-overlay:target img {
-webkit-animation: scaleDown 1.2s ease-in-out;
-moz-animation: scaleDown 1.2s ease-in-out;
-o-animation: scaleDown 1.2s ease-in-out;
-ms-animation: scaleDown 1.2s ease-in-out;
animation: scaleDown 1.2s ease-in-out;
}
.lb-overlay:target a.lb-close,
.lb-overlay:target > div{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
@-webkit-keyframes scaleDown {
0% { -webkit-transform: scale(10,10); opacity: 0; }
100% { -webkit-transform: scale(1,1); opacity: 1; }
}
@-moz-keyframes scaleDown {
0% { -moz-transform: scale(10,10); opacity: 0; }
100% { -moz-transform: scale(1,1); opacity: 1; }
}
@-o-keyframes scaleDown {
0% { -o-transform: scale(10,10); opacity: 0; }
100% { -o-transform: scale(1,1); opacity: 1; }
}
@-ms-keyframes scaleDown {
0% { -ms-transform: scale(10,10); opacity: 0; }
100% { -ms-transform: scale(1,1); opacity: 1; }
}
@keyframes scaleDown {
0% { transform: scale(10,10); opacity: 0; }
100% { transform: scale(1,1); opacity: 1; }
}
x:-o-prefocus, .lb-overlay img {
height: 100%;
}

HTML

<ul class="lb-album">
<li>
<a href="#image-1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUW9lS3nDShm6ccUMH6r_D2kOl1SvO2NtrEbLVyKJYqsUqTaIXoMuVpD0_DzBJgk_EVKAt0hbI-jO72A1-CrfjMkr7O3plfuGtB1YqB-juAleIEwrbz3-uy4d3yfoLOPzRTdnVGiAKzlk/s150-no/Thumb+%25289%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSKKLR7KJCyGKV1Yz2dpdWPRyn_R6QopIQABNANdE3z80xCvJqQGIKXtL8BVkENMHVpEqoZQEKd6o-KvmbRRUbSbL6P7B_QQjhl7NreEMKUmYzVfglwUzHwV3IcxLnivuF_MuyexOL3hA/w355-h533-no/foto+%25289%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnS_BTFOt_lGDyYS5JuPZNFoYMY7MiaYBA6oJV2xFEqr-Fz73JpTwh0gdSCTQiL08TR551t5nVxjTF0MB0Li7cCiNrNWYAPBU5xt5YJhmTuUK7S2QAi5eO42p4zxqNjLe5Bz-4KBVDKQ/s150-no/Thumb+%25286%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAPQ5zNXb7FWfeWSA3BVE7U6cZzXoou0rKHfHCv0lR3uMsfanBThjTzJPDbQzxJ_pinMGdEICaogceGMKedT8q_jV_ArUIE7qvodI0TbY_dmqKDmqSjaiynlt9JZl8EeDbR2YyY2AoQY/w355-h533-no/foto+%25286%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbpaEnksLfTImj2XvpGMR-SoCqasBUW7m0jeX27Mdr3k41tI86L6hLpjZ0MJUxkNSnox3P0n4jJV9amwT8VlAC2WCia4cKeE_BABFxEJeor9WTVMHJw6G21JMPMZaDrwrlpVu1o4DxJLw/s150-no/Thumb+%25288%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisar0pvmxfjys6i31ufr_JD7Hbu7-fIOoWG8tMyYtQXlduKtnFmsTWUrJSsM-jj9EOasWkeYgV3m4ZbgRATAj9Rs4MUAPEgSpPRegVc9swKAkc_8KkL_ewAbcmfRyVrDkPkLvTuNunPac/w387-h533-no/foto+%25288%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdt8De8iDgAEzt6I7m7LQpRsnEtu4rYzxur6RjHsfVggfoGr_J2RcWT8lOZduXEShOxlRnUAYUVQRSUmM_15ljWto2Dr6OtJNUiRqPZS8E6IlwXoBbMrOdClXSPUVukLDK0Y5qrtsVlI/s150-no/Thumb+%25282%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAvlZ3ukUxcuBvjm5ZpbAoKkhbok0d7ABEJQ3ehZl-v20D6iWodcnKaZP359w3_ag9jHF6CmY7MSRELJhHGOaarpx5bz3o3I62DIJ1G0iVTFNgjG_ynfdPxC7Y9wtuWdmgkXezJhroZvo/w501-h533-no/foto+%25282%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxV20D5S_4jG22dxceRXhRco4NqpFOFEFvAOFydmetCaAynd5u5727vsIFGwiFLAoEPUTAVkfnF08oeuQVZ34BjcpikU2MAS5DdN4oqYAjqH2HaOo0taCohBsRK9GOQr68CLY_a8yYok/s150-no/Thumb+%25287%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-5">
<a href="#page" class="lb-close">x Close</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAqbxlMrKu-XkUh5uwJf74ppV3r3aBwWwjB85ygd1qZkiTSzanWAch37vp6NMkmUUSUb2cm5eQ2lb9M4higmL6b_23KmQw4Gba3bDtTPFVNPVTCrQLUa-_XeAn9BpWuUUMGG7Wm92aIds/s533-no/foto+%25287%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
</div>
</li>

<li>
<a href="#image-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4SDMHipt4HJltk6EPvfouQPLaurjFpCiAQOjq9grN3DdUtOhroOrSKCA01ofMOfFcN3ESaQigNk8bnNUUnSccihpTE6MzkZfrx_CbXyld7Sug-RTWCAxuur9Y-Y1ZK4vDfUQoQRO3RA/s150-no/Thumb+%25285%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEdR6_tLHYm44LmcKjgqefJg6jywnQMNbJPy52mSi7ueaJHu77mgcI2JyXkz8rXO0U7FyVziK1kS7_PXtTOu6pfu1vc_Dg13DpymVokQ1WimlYKLjWCuspfkXzBU5XIc1R6fT_pfolL3g/w419-h533-no/foto+%25285%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqXV96_R3uI6E202RsvM5ELJlZUlCh1hlmYU7awnThmRghDh0xF1vMLuTG2jsU8AtTJoCZvGrqXfq4llntd2VbORH_9__7YUshcm3fUbU-WYHQomoKvvAJqPEv1XpTNU5vrtRHuzsd2M/s150-no/Thumb+%25284%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3bM7O7fawA2rXHYz2kgBe7CHpIbe-wqaGYCZHQQzM4HjDOWBd5rImrWcJFb2G0AtrMfq9zEsG3s6XiwQpDX_Are2JNftF_4rs3XVy0o07Dbm6Cs4GpqwrPeawsciwaoBZ1KBgJQIOnk/s533-no/foto+%25284%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-8">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqf_-1IxzQSzNn1QC4WrzSBmYLxt_qZWcy5PtTU_oeqCEXVDwiHXah8846aHN45uevWSA7rXVoS_L0IdFYWFyKw_d68SoL0YRNCPqAudHcwqITloohekkNEtTxQP1ljvB6etlrqWOUKA/s150-no/Thumb+%25283%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-8">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceXpy7m17Y34y9XNpBw0ItBrbYn0AmtBRJrp7_nbwmibw3JTbJwkQ9jUYEJ1TM6jhbYfmf_IQis6XfOnyylo3IZmezdxryeUlV2DxdEI5IrnUfRt9gGy2II35Ar188qcYO1Y5Uvr_SDg/s533-no/foto+%25283%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-9">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzsSURa2N0b-0Bhp0Vp7UllqkpEADxEYOdpByVwP3EXaU7cwNBjba1ujpjMzfFzEPCrWvqHScqKf5AHZAjSDRFfl0Z4oTtp9Sj1PQsOJ-uOsYmNV4ZuAfp1zaVBP9wI99BuPUmPUVKw4w/s150-no/Thumb+%25281%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-9">
<a href="#page" class="lb-close">x Close</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimA1BLGyc0-B224DRKX9eYoLkGsIYBIzel8bQvjQwZ1dffSE-UnwM7Ql_bC8n7jAFn68NhIxlx8xasApkVnguzKbgXYLMSDoJeZfpbBAWOaRxDIs-sORnL9-MbUR66XKpiXEb44oOEpw/w355-h533-no/foto+%25281%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
</div>
</div>
</li>
</ul>

KODE PINKBOX STYLE #3

Demo Style #3

CSS

ol,ul {list-style:none;}
.lb-album{
width: auto;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: left;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px 4px 4px 4px;
}
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(241,210,194,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
}
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
.lb-overlay img{
/* height: 100%; For Opera max-height does not seem to work */
max-height: 100%;
position: relative;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
.lb-prev, .lb-next{
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
filter: alpha(opacity=80); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
margin-left: -30px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmlQI96OfFRA7X81HYDnWlKdcDnwYQmkwDDA7Ly3iDCCS-27mQFJqNL2EUKFOS_luCRIUTdyqsUTH69vfWfTCXzK5DggOWzdRfXRF-Uem0W74Kgk0EWdWRVPsEeKJO5BFhoJJbEimoHs/h120/arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmlQI96OfFRA7X81HYDnWlKdcDnwYQmkwDDA7Ly3iDCCS-27mQFJqNL2EUKFOS_luCRIUTdyqsUTH69vfWfTCXzK5DggOWzdRfXRF-Uem0W74Kgk0EWdWRVPsEeKJO5BFhoJJbEimoHs/h120/arrows.png) no-repeat top right;
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
x:-o-prefocus, .lb-overlay img {
height: 100%;
}

HTML

<li>
<a href="#image-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnS_BTFOt_lGDyYS5JuPZNFoYMY7MiaYBA6oJV2xFEqr-Fz73JpTwh0gdSCTQiL08TR551t5nVxjTF0MB0Li7cCiNrNWYAPBU5xt5YJhmTuUK7S2QAi5eO42p4zxqNjLe5Bz-4KBVDKQ/s150-no/Thumb+%25286%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWAPQ5zNXb7FWfeWSA3BVE7U6cZzXoou0rKHfHCv0lR3uMsfanBThjTzJPDbQzxJ_pinMGdEICaogceGMKedT8q_jV_ArUIE7qvodI0TbY_dmqKDmqSjaiynlt9JZl8EeDbR2YyY2AoQY/w355-h533-no/foto+%25286%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-1" class="lb-prev">Prev</a>
<a href="#image-3" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbpaEnksLfTImj2XvpGMR-SoCqasBUW7m0jeX27Mdr3k41tI86L6hLpjZ0MJUxkNSnox3P0n4jJV9amwT8VlAC2WCia4cKeE_BABFxEJeor9WTVMHJw6G21JMPMZaDrwrlpVu1o4DxJLw/s150-no/Thumb+%25288%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisar0pvmxfjys6i31ufr_JD7Hbu7-fIOoWG8tMyYtQXlduKtnFmsTWUrJSsM-jj9EOasWkeYgV3m4ZbgRATAj9Rs4MUAPEgSpPRegVc9swKAkc_8KkL_ewAbcmfRyVrDkPkLvTuNunPac/w387-h533-no/foto+%25288%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-2" class="lb-prev">Prev</a>
<a href="#image-4" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgxV20D5S_4jG22dxceRXhRco4NqpFOFEFvAOFydmetCaAynd5u5727vsIFGwiFLAoEPUTAVkfnF08oeuQVZ34BjcpikU2MAS5DdN4oqYAjqH2HaOo0taCohBsRK9GOQr68CLY_a8yYok/s150-no/Thumb+%25287%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAqbxlMrKu-XkUh5uwJf74ppV3r3aBwWwjB85ygd1qZkiTSzanWAch37vp6NMkmUUSUb2cm5eQ2lb9M4higmL6b_23KmQw4Gba3bDtTPFVNPVTCrQLUa-_XeAn9BpWuUUMGG7Wm92aIds/s533-no/foto+%25287%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-3" class="lb-prev">Prev</a>
<a href="#image-5" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-5">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi4SDMHipt4HJltk6EPvfouQPLaurjFpCiAQOjq9grN3DdUtOhroOrSKCA01ofMOfFcN3ESaQigNk8bnNUUnSccihpTE6MzkZfrx_CbXyld7Sug-RTWCAxuur9Y-Y1ZK4vDfUQoQRO3RA/s150-no/Thumb+%25285%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-5">
<a href="#page" class="lb-close">x Close</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEdR6_tLHYm44LmcKjgqefJg6jywnQMNbJPy52mSi7ueaJHu77mgcI2JyXkz8rXO0U7FyVziK1kS7_PXtTOu6pfu1vc_Dg13DpymVokQ1WimlYKLjWCuspfkXzBU5XIc1R6fT_pfolL3g/w419-h533-no/foto+%25285%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-4" class="lb-prev">Prev</a>
<a href="#image-6" class="lb-next">Next</a>
</div>
</div>
</li>

<li>
<a href="#image-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqXV96_R3uI6E202RsvM5ELJlZUlCh1hlmYU7awnThmRghDh0xF1vMLuTG2jsU8AtTJoCZvGrqXfq4llntd2VbORH_9__7YUshcm3fUbU-WYHQomoKvvAJqPEv1XpTNU5vrtRHuzsd2M/s150-no/Thumb+%25284%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-6">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3bM7O7fawA2rXHYz2kgBe7CHpIbe-wqaGYCZHQQzM4HjDOWBd5rImrWcJFb2G0AtrMfq9zEsG3s6XiwQpDX_Are2JNftF_4rs3XVy0o07Dbm6Cs4GpqwrPeawsciwaoBZ1KBgJQIOnk/s533-no/foto+%25284%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-5" class="lb-prev">Prev</a>
<a href="#image-7" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtqf_-1IxzQSzNn1QC4WrzSBmYLxt_qZWcy5PtTU_oeqCEXVDwiHXah8846aHN45uevWSA7rXVoS_L0IdFYWFyKw_d68SoL0YRNCPqAudHcwqITloohekkNEtTxQP1ljvB6etlrqWOUKA/s150-no/Thumb+%25283%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-7">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceXpy7m17Y34y9XNpBw0ItBrbYn0AmtBRJrp7_nbwmibw3JTbJwkQ9jUYEJ1TM6jhbYfmf_IQis6XfOnyylo3IZmezdxryeUlV2DxdEI5IrnUfRt9gGy2II35Ar188qcYO1Y5Uvr_SDg/s533-no/foto+%25283%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-6" class="lb-prev">Prev</a>
<a href="#image-8" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>

<li>
<a href="#image-8">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzsSURa2N0b-0Bhp0Vp7UllqkpEADxEYOdpByVwP3EXaU7cwNBjba1ujpjMzfFzEPCrWvqHScqKf5AHZAjSDRFfl0Z4oTtp9Sj1PQsOJ-uOsYmNV4ZuAfp1zaVBP9wI99BuPUmPUVKw4w/s150-no/Thumb+%25281%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-8">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhimA1BLGyc0-B224DRKX9eYoLkGsIYBIzel8bQvjQwZ1dffSE-UnwM7Ql_bC8n7jAFn68NhIxlx8xasApkVnguzKbgXYLMSDoJeZfpbBAWOaRxDIs-sORnL9-MbUR66XKpiXEb44oOEpw/w355-h533-no/foto+%25281%2529.jpg" alt="faceblog evolutions" />
<div>     
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-7" class="lb-prev">Prev</a>
<a href="#image-9" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<a href="#image-9">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdt8De8iDgAEzt6I7m7LQpRsnEtu4rYzxur6RjHsfVggfoGr_J2RcWT8lOZduXEShOxlRnUAYUVQRSUmM_15ljWto2Dr6OtJNUiRqPZS8E6IlwXoBbMrOdClXSPUVukLDK0Y5qrtsVlI/s150-no/Thumb+%25282%2529.jpg" alt="faceblog evolutions" >
<span>JUDUL</span>
</a>
<div class="lb-overlay" id="image-9">
<a href="#page" class="lb-close">x Close</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAvlZ3ukUxcuBvjm5ZpbAoKkhbok0d7ABEJQ3ehZl-v20D6iWodcnKaZP359w3_ag9jHF6CmY7MSRELJhHGOaarpx5bz3o3I62DIJ1G0iVTFNgjG_ynfdPxC7Y9wtuWdmgkXezJhroZvo/w501-h533-no/foto+%25282%2529.jpg" alt="faceblog evolutions" />
<div>
<h3>JUDUL</h3>
<p>Silahkan ganti dengan deskripsi gambar yang di inginkan</p>
<a href="#image-8" class="lb-prev">Prev</a>
<a href="#image-10" class="lb-next">Next</a>
</div>
</div>
</li>
</ul>