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/AVvXsEgWFVRG7GINCpc790QPHewLGjNKKO8cVwM6_Sp7BjvqsiVIdBuMWVJFsQ4X0HC-So8-mNPpDcPj2EGBOe-iDc2NQ0xe6JPie1AK9fm9V44D73lYcrhY8KwLwGMqN4HFksvodurdCogE62k/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/AVvXsEgxWO92ZcP645AKfN4SR2QUn8RTGoVkB0D20CG72DDfuQdN56gwZBlATETDyObyxMryLbd1idokc74_r6ADacAbWXYw7DMqaA5gnF9TNDNOU2UZAdElogNLYHKMI5MeJaMMEetovenZTbo/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/AVvXsEgB5dvwjndTxGikVHqCcjSul1Akv3c8FkZwoh9AJns27DwAi-VkjZplDTTVoeXFiDMqFx9kNPhLKWWRPtl1ex9sA9hZt4-Dl7TjYcMXzbgUj4sIMLOQtRGTfBB3RHlN9Kgs-MmqlcO0oe4/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/AVvXsEjYJRFXOYcGATIbIqTKhHK-WDOV34VwqadczmEVIsAIRjCdRcItZoWxjO6ZYVB_jNfuhVU-quZmTAgStfY-rFJ4eWQMyJhewU5ACsfHXTlCL1LY3FL5tbhzhQiGcTqeqHhGEhW5EzxvjpE/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/AVvXsEjQWCkcnjWw7dB0LMSKdnQZMsy_XVSqC6bU4bHlwxaUioPlYVA-cXkguWF0JKmohBtymAR6NPYSIsVcPV0RdFFouqhYPvCRS6WPrMFFHQrbmnqUWtav7u0TdVvzX8dC5jrSnvm4v4ZLKf4/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/AVvXsEh9y4_XKWd_Br2wHQTO42F_TAIudq1fEdBxHNlWkHrIUBtYSr6VWr95WjFWv6BpeFdPWyJuSrW6KgqQRuO9lyjA8hrqOkyRbogEgRL2pJSB32iw5VeKcPs896yraTbGiVfUGD6ghapqZe4/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/AVvXsEho0LRmpxNEnK-GgiG76EjYe3v4sLN2t1A9BCTmIKzcdI64w-fmBLC4eM_v6TqY4ZoY1uQ3l3QV2djKz8DPMtwSOu5SyD-sG_-EXJuzTWvH3bLSjhgbjfmBj-ZRee1-YbBj1xOLo2292Tw/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/AVvXsEihhUyyf9Io-tAxdLGGo2iNaq5lFutCU6m-T0LmRkt3LdNbOv-6_ww5XaPmY_D0ZBb76RdEqfOCoce9aqUWdh505A1WdlyHSQ1ntn7-Iht3DtFIW3ep8kBOKZNWvjj-9nPTW0qhBr0ICWg/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/AVvXsEiIGYurpJvIuJYPpvcNF6xbgpBgZW9qHdg9j5wxpIL2g8zeCo2tc1FMgtHHjQmvdjlvEwQNeJ2JuWMLSLGrfT5WW85dsi9upmp-5KvVpM9o5P6_7hSo7G7t9hrSDHkI9hh9vhOk-fyHyNc/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/AVvXsEgnn7-X6kDfYr8rQiLF4oe8cUOlvxZ2I28ZbQoFnywxcTQzxh59ZPANR0dPwA8dCLElWgv7ru9PPTGwibFye4jQr385IJ20is3OLUBVlOP_jGD4USn3RmPr_-kMhyphenhyphenrAX-JW46pFuvyKSPM/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/AVvXsEi5H2zRCYqNwrc9wrthJoA3GhEMm_LXWrGi6MhKTbO-ygnzrbC9BVniOki5s9kcbJxPrYhBCZcjfcQ4XFkykpEVXdYBB4JUnuZ_zOpMLvus3V0TZC-2o5am8-SmA0JjX5DvCy6opQVOhWA/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/AVvXsEjG6P5rHV3CcTcectnOTWrBWacIx-8bEJ1Htx6wUI5QULus1jMZZTOcjc15867kdWcVf1ZqBU7ptCgCgU_JXxwyX-DctlC2uOpPyvXjZoonMkbDdZcGVgX1A5MuK_FtxRDHaWMayZrqtig/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/AVvXsEjnDqS6xd_TYquZuy5GVnVJR88EDgctIklN5s0FcS5WzO52ZmPNaeVCXGO8HEsB47FJEyv5asOTANL8FJSKEP4KEkG51hxsv0FCB7i8wWYJqV9CeHVAk5yEJjbnLiC-pueoZQXhRfvUQiM/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/AVvXsEjwpaaoKSAcsic7r5ScVvLsZxFv5ztiLEFM5lgWbxF-hCEWGqOTRwaZmIlknLX8zy6okrm8nwd6V4J3ayV-IiD_8A0UK8KeWHCJY8C1dJdOo5Vz1yEtSwvkjiIAUpnS9UMUaHJWoFcnr_w/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/AVvXsEh-bAFi2L1mAnLKXpf5dSyiaYH2mztJAdUZETSsWs9X7OIdoaphYOoKxrhbKDAIX1Av5oTFCcjUe0qyuvOc5F2DgpKRPy06ZvmbUkytJbv-RQ-Pm43fZ4zcx15i7unlFOpDp2R_m5CDWC0/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/AVvXsEgbcZBRbiDhljfN5b8MPNrBgTHfLYd9J2oEKzqeNuGjXO_reyNm7O0-D3QsAOKvisxSUz6XhjcmnRhdzkKpl1vARKJVMLkVRi1xvFkYoKMI1TCmoTPEqktPs3lmJGpEeA9zPL5y37-VeN0/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/AVvXsEgRrk_zzinyUPjt3tBhkQLqCr8fsuwdZ59hVINP9c3mpUj8PljTQtB4HC7h5SMTAeWR1fa_8yrP0ti5w8K_maHc-J73aU4PEwpVQBPl2jC2EhIbgD8rlll_WXEvnZCmy8YgDZoT8UOAPhM/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/AVvXsEhkZ50oEAdhw3MGCu3s25k591MI2oC6LYxIiI82utvdLFwj4FqJSUtGeZ9juC868snzqlpQWJB4Wu8QYy1AUnkBgDOEGrdgo0ZzPsEXfBbLACB7xu-Aycy0QWwBxPjadGVVQmP4x4r-JQ4/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/AVvXsEgWFVRG7GINCpc790QPHewLGjNKKO8cVwM6_Sp7BjvqsiVIdBuMWVJFsQ4X0HC-So8-mNPpDcPj2EGBOe-iDc2NQ0xe6JPie1AK9fm9V44D73lYcrhY8KwLwGMqN4HFksvodurdCogE62k/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/AVvXsEgxWO92ZcP645AKfN4SR2QUn8RTGoVkB0D20CG72DDfuQdN56gwZBlATETDyObyxMryLbd1idokc74_r6ADacAbWXYw7DMqaA5gnF9TNDNOU2UZAdElogNLYHKMI5MeJaMMEetovenZTbo/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/AVvXsEgB5dvwjndTxGikVHqCcjSul1Akv3c8FkZwoh9AJns27DwAi-VkjZplDTTVoeXFiDMqFx9kNPhLKWWRPtl1ex9sA9hZt4-Dl7TjYcMXzbgUj4sIMLOQtRGTfBB3RHlN9Kgs-MmqlcO0oe4/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/AVvXsEjYJRFXOYcGATIbIqTKhHK-WDOV34VwqadczmEVIsAIRjCdRcItZoWxjO6ZYVB_jNfuhVU-quZmTAgStfY-rFJ4eWQMyJhewU5ACsfHXTlCL1LY3FL5tbhzhQiGcTqeqHhGEhW5EzxvjpE/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/AVvXsEjQWCkcnjWw7dB0LMSKdnQZMsy_XVSqC6bU4bHlwxaUioPlYVA-cXkguWF0JKmohBtymAR6NPYSIsVcPV0RdFFouqhYPvCRS6WPrMFFHQrbmnqUWtav7u0TdVvzX8dC5jrSnvm4v4ZLKf4/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/AVvXsEh9y4_XKWd_Br2wHQTO42F_TAIudq1fEdBxHNlWkHrIUBtYSr6VWr95WjFWv6BpeFdPWyJuSrW6KgqQRuO9lyjA8hrqOkyRbogEgRL2pJSB32iw5VeKcPs896yraTbGiVfUGD6ghapqZe4/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/AVvXsEho0LRmpxNEnK-GgiG76EjYe3v4sLN2t1A9BCTmIKzcdI64w-fmBLC4eM_v6TqY4ZoY1uQ3l3QV2djKz8DPMtwSOu5SyD-sG_-EXJuzTWvH3bLSjhgbjfmBj-ZRee1-YbBj1xOLo2292Tw/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/AVvXsEihhUyyf9Io-tAxdLGGo2iNaq5lFutCU6m-T0LmRkt3LdNbOv-6_ww5XaPmY_D0ZBb76RdEqfOCoce9aqUWdh505A1WdlyHSQ1ntn7-Iht3DtFIW3ep8kBOKZNWvjj-9nPTW0qhBr0ICWg/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/AVvXsEiIGYurpJvIuJYPpvcNF6xbgpBgZW9qHdg9j5wxpIL2g8zeCo2tc1FMgtHHjQmvdjlvEwQNeJ2JuWMLSLGrfT5WW85dsi9upmp-5KvVpM9o5P6_7hSo7G7t9hrSDHkI9hh9vhOk-fyHyNc/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/AVvXsEgnn7-X6kDfYr8rQiLF4oe8cUOlvxZ2I28ZbQoFnywxcTQzxh59ZPANR0dPwA8dCLElWgv7ru9PPTGwibFye4jQr385IJ20is3OLUBVlOP_jGD4USn3RmPr_-kMhyphenhyphenrAX-JW46pFuvyKSPM/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/AVvXsEi5H2zRCYqNwrc9wrthJoA3GhEMm_LXWrGi6MhKTbO-ygnzrbC9BVniOki5s9kcbJxPrYhBCZcjfcQ4XFkykpEVXdYBB4JUnuZ_zOpMLvus3V0TZC-2o5am8-SmA0JjX5DvCy6opQVOhWA/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/AVvXsEjG6P5rHV3CcTcectnOTWrBWacIx-8bEJ1Htx6wUI5QULus1jMZZTOcjc15867kdWcVf1ZqBU7ptCgCgU_JXxwyX-DctlC2uOpPyvXjZoonMkbDdZcGVgX1A5MuK_FtxRDHaWMayZrqtig/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/AVvXsEjnDqS6xd_TYquZuy5GVnVJR88EDgctIklN5s0FcS5WzO52ZmPNaeVCXGO8HEsB47FJEyv5asOTANL8FJSKEP4KEkG51hxsv0FCB7i8wWYJqV9CeHVAk5yEJjbnLiC-pueoZQXhRfvUQiM/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/AVvXsEjwpaaoKSAcsic7r5ScVvLsZxFv5ztiLEFM5lgWbxF-hCEWGqOTRwaZmIlknLX8zy6okrm8nwd6V4J3ayV-IiD_8A0UK8KeWHCJY8C1dJdOo5Vz1yEtSwvkjiIAUpnS9UMUaHJWoFcnr_w/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/AVvXsEh-bAFi2L1mAnLKXpf5dSyiaYH2mztJAdUZETSsWs9X7OIdoaphYOoKxrhbKDAIX1Av5oTFCcjUe0qyuvOc5F2DgpKRPy06ZvmbUkytJbv-RQ-Pm43fZ4zcx15i7unlFOpDp2R_m5CDWC0/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/AVvXsEgbcZBRbiDhljfN5b8MPNrBgTHfLYd9J2oEKzqeNuGjXO_reyNm7O0-D3QsAOKvisxSUz6XhjcmnRhdzkKpl1vARKJVMLkVRi1xvFkYoKMI1TCmoTPEqktPs3lmJGpEeA9zPL5y37-VeN0/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/AVvXsEgRrk_zzinyUPjt3tBhkQLqCr8fsuwdZ59hVINP9c3mpUj8PljTQtB4HC7h5SMTAeWR1fa_8yrP0ti5w8K_maHc-J73aU4PEwpVQBPl2jC2EhIbgD8rlll_WXEvnZCmy8YgDZoT8UOAPhM/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/AVvXsEhkZ50oEAdhw3MGCu3s25k591MI2oC6LYxIiI82utvdLFwj4FqJSUtGeZ9juC868snzqlpQWJB4Wu8QYy1AUnkBgDOEGrdgo0ZzPsEXfBbLACB7xu-Aycy0QWwBxPjadGVVQmP4x4r-JQ4/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/AVvXsEiA_wFz0_h42sNVdad79XlActACli86ekiNRNHY95RPQi59OVLlS9JN1bEPo6kWKHP0V5ap1O7zuJxJ3Xsj1YJIvZMYWFKBchajHSuiNwfEVys7W8qyAFThZCLxY3oeh2I9ayaN2BSztSI/h120/arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA_wFz0_h42sNVdad79XlActACli86ekiNRNHY95RPQi59OVLlS9JN1bEPo6kWKHP0V5ap1O7zuJxJ3Xsj1YJIvZMYWFKBchajHSuiNwfEVys7W8qyAFThZCLxY3oeh2I9ayaN2BSztSI/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/AVvXsEgB5dvwjndTxGikVHqCcjSul1Akv3c8FkZwoh9AJns27DwAi-VkjZplDTTVoeXFiDMqFx9kNPhLKWWRPtl1ex9sA9hZt4-Dl7TjYcMXzbgUj4sIMLOQtRGTfBB3RHlN9Kgs-MmqlcO0oe4/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/AVvXsEjYJRFXOYcGATIbIqTKhHK-WDOV34VwqadczmEVIsAIRjCdRcItZoWxjO6ZYVB_jNfuhVU-quZmTAgStfY-rFJ4eWQMyJhewU5ACsfHXTlCL1LY3FL5tbhzhQiGcTqeqHhGEhW5EzxvjpE/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/AVvXsEjQWCkcnjWw7dB0LMSKdnQZMsy_XVSqC6bU4bHlwxaUioPlYVA-cXkguWF0JKmohBtymAR6NPYSIsVcPV0RdFFouqhYPvCRS6WPrMFFHQrbmnqUWtav7u0TdVvzX8dC5jrSnvm4v4ZLKf4/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/AVvXsEh9y4_XKWd_Br2wHQTO42F_TAIudq1fEdBxHNlWkHrIUBtYSr6VWr95WjFWv6BpeFdPWyJuSrW6KgqQRuO9lyjA8hrqOkyRbogEgRL2pJSB32iw5VeKcPs896yraTbGiVfUGD6ghapqZe4/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/AVvXsEiIGYurpJvIuJYPpvcNF6xbgpBgZW9qHdg9j5wxpIL2g8zeCo2tc1FMgtHHjQmvdjlvEwQNeJ2JuWMLSLGrfT5WW85dsi9upmp-5KvVpM9o5P6_7hSo7G7t9hrSDHkI9hh9vhOk-fyHyNc/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/AVvXsEgnn7-X6kDfYr8rQiLF4oe8cUOlvxZ2I28ZbQoFnywxcTQzxh59ZPANR0dPwA8dCLElWgv7ru9PPTGwibFye4jQr385IJ20is3OLUBVlOP_jGD4USn3RmPr_-kMhyphenhyphenrAX-JW46pFuvyKSPM/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/AVvXsEi5H2zRCYqNwrc9wrthJoA3GhEMm_LXWrGi6MhKTbO-ygnzrbC9BVniOki5s9kcbJxPrYhBCZcjfcQ4XFkykpEVXdYBB4JUnuZ_zOpMLvus3V0TZC-2o5am8-SmA0JjX5DvCy6opQVOhWA/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/AVvXsEjG6P5rHV3CcTcectnOTWrBWacIx-8bEJ1Htx6wUI5QULus1jMZZTOcjc15867kdWcVf1ZqBU7ptCgCgU_JXxwyX-DctlC2uOpPyvXjZoonMkbDdZcGVgX1A5MuK_FtxRDHaWMayZrqtig/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/AVvXsEjnDqS6xd_TYquZuy5GVnVJR88EDgctIklN5s0FcS5WzO52ZmPNaeVCXGO8HEsB47FJEyv5asOTANL8FJSKEP4KEkG51hxsv0FCB7i8wWYJqV9CeHVAk5yEJjbnLiC-pueoZQXhRfvUQiM/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/AVvXsEjwpaaoKSAcsic7r5ScVvLsZxFv5ztiLEFM5lgWbxF-hCEWGqOTRwaZmIlknLX8zy6okrm8nwd6V4J3ayV-IiD_8A0UK8KeWHCJY8C1dJdOo5Vz1yEtSwvkjiIAUpnS9UMUaHJWoFcnr_w/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/AVvXsEh-bAFi2L1mAnLKXpf5dSyiaYH2mztJAdUZETSsWs9X7OIdoaphYOoKxrhbKDAIX1Av5oTFCcjUe0qyuvOc5F2DgpKRPy06ZvmbUkytJbv-RQ-Pm43fZ4zcx15i7unlFOpDp2R_m5CDWC0/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/AVvXsEgbcZBRbiDhljfN5b8MPNrBgTHfLYd9J2oEKzqeNuGjXO_reyNm7O0-D3QsAOKvisxSUz6XhjcmnRhdzkKpl1vARKJVMLkVRi1xvFkYoKMI1TCmoTPEqktPs3lmJGpEeA9zPL5y37-VeN0/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/AVvXsEgRrk_zzinyUPjt3tBhkQLqCr8fsuwdZ59hVINP9c3mpUj8PljTQtB4HC7h5SMTAeWR1fa_8yrP0ti5w8K_maHc-J73aU4PEwpVQBPl2jC2EhIbgD8rlll_WXEvnZCmy8YgDZoT8UOAPhM/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/AVvXsEhkZ50oEAdhw3MGCu3s25k591MI2oC6LYxIiI82utvdLFwj4FqJSUtGeZ9juC868snzqlpQWJB4Wu8QYy1AUnkBgDOEGrdgo0ZzPsEXfBbLACB7xu-Aycy0QWwBxPjadGVVQmP4x4r-JQ4/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/AVvXsEho0LRmpxNEnK-GgiG76EjYe3v4sLN2t1A9BCTmIKzcdI64w-fmBLC4eM_v6TqY4ZoY1uQ3l3QV2djKz8DPMtwSOu5SyD-sG_-EXJuzTWvH3bLSjhgbjfmBj-ZRee1-YbBj1xOLo2292Tw/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/AVvXsEihhUyyf9Io-tAxdLGGo2iNaq5lFutCU6m-T0LmRkt3LdNbOv-6_ww5XaPmY_D0ZBb76RdEqfOCoce9aqUWdh505A1WdlyHSQ1ntn7-Iht3DtFIW3ep8kBOKZNWvjj-9nPTW0qhBr0ICWg/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>

25 Response to "3 Style Gallery CSS3 Photo Pinkbox Pada Blog"

rifqi | android

5/27/13, 5:48 AM

CSS3 memang keren ya, terima kasih

Balas

Unknown

5/27/13, 6:25 AM

trik ini cocok banget utk mereka yg mengutamakan galeri foto. byk blog2 yg mengutamakan foto2 background dan wallpaper

5/27/13, 10:20 AM

visit and follow me back

http://tkj-cyber4rt.blogspot.com

GO-LINK│*Cafe Information™

5/27/13, 10:22 AM

wah... bagus nih buat di koleksi mas andes... ijin save ya...

K.A.A

5/27/13, 10:30 AM

Sangat mengesankan CSS3, bisa buat poto poto kita lebih kece terpampang di BLOG. Makasi Andes Rizky Nugroho

Dhani Site

5/27/13, 1:40 PM

ijin bookmark dulu .. kerenn

registry

5/27/13, 2:48 PM

wah keren nih tutorialnya makasih yah mas buat tutorialnya maen-maen dong mas ke blog ane http://registrykaskus.com

5/27/13, 4:20 PM

kenapa gak pernah pake model cowo selain admin ya.. haha

kidding.

Djangkaru Bumi

5/27/13, 4:36 PM

terimakasih atas sharingnya, dulu saya sempat penasaran dengan penampilan gallery photo pink box.

Kumpulan Desain Grafis | Andy Desain

5/27/13, 4:59 PM

mas andes memang jago kalau soal CSS,, hehehe..

5/27/13, 6:41 PM

Asiiiikkkkkkk .
Setelah sekian lama ku menunggu,
maksih mas andes :D

dedetea66

5/27/13, 7:24 PM

mantap mas Andes Tutornya,,ijin myontek ach,,,,

5/27/13, 7:27 PM

nunggunya dimana mbak iin hehe,ko gak ketemu saya sih hihi
{kidding}saja,

penyuluh perikanan

5/27/13, 10:31 PM

wah benar-benar sangat mantap sobat
terima kasih sudah berbagi ilmu

Farhan Fauzan

5/30/13, 12:18 PM

wah jadi menarik ya slider jquery pinkbox...jadi pengen belajar js nih saya mas

5/31/13, 4:24 PM

makin keren aja nih mas tutor blognya

Sipokameame

6/1/13, 7:50 AM

Wuih manteb banget ini bang.... tar ane coba terapin... ;D

Rahasia Hidup Sehat

6/3/13, 2:28 AM

Keren mas tutorialnya... boleh dicoba nih css3 photo pinkboxnya, makasih udah share, sukses selalu :)

all about indonesia

6/4/13, 11:32 PM

agak kurang paham mas, kalo pake CSS, tapi keren banget nih, saya aja yang nggak bisa mengaplikasikan nya

kulkul gallery

7/4/13, 9:39 PM

Keren sekali Mas Andes...ijin copas nggih, thank's be 4 and sukses selalu

8/4/13, 10:36 AM

MAs.. kok yang saya gambarnya gak rata.. ?

JanDara24x7

10/24/13, 1:23 PM

berarti Otak Loe rada bermasalah Gtu lah....
Coba deh instal ulang OTAK OTAK nya

10/24/13, 1:24 PM

Sob Keren Gw Kasih Jempol Deh Buat Situ....
terima Kasih atas ARTICLE nya :)

Putra Kefa

10/28/13, 11:30 AM

Admin :) visit and follow me back

http://anaktimor-17.blogspot.com

Anonymous

Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
Apabila artikel yang berjudul "3 Style Gallery CSS3 Photo Pinkbox Pada Blog" ini bermanfaat, share ke jejaring sosial.

Konversi Kode

Blog Mas Andes

3 Style Gallery CSS3 Photo Pinkbox Pada Blog

Berlangganan artikel via email

25 Response to "3 Style Gallery CSS3 Photo Pinkbox Pada Blog"

3 Style Gallery CSS3 Photo Pinkbox Pada Blog

Next

Newer Post

Previous

Older Post

Berlangganan artikel via email

25 Response to "3 Style Gallery CSS3 Photo Pinkbox Pada Blog"