Membuat 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

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

X

X

X

Gabung ke group:

Follow @aditya_m_r

Share