Membuat CSS Image Gallery Tanpa Javascript

Template Landing Page untuk Blogspot

Tutorial kali ini saya akan membuat image gallery dengan CSS, ya CSS saja tanpa menggunakan jQuery atau library javascript lainnya. Saya akan memanfaatkan CSS pseudo selector :target.

CSS Images Gallery tanpa Javascript

Markup

Saya menggunakan desain dari Orman Clark yang dapat di unduh disini. Struktur HTML nya terdiri dari gambar thumbnail dan gambar gallery yang besar. Gambar gallery yang besar memiliki id masing-masing, ini digunakan untuk memilih gambar mana yang akan muncul ketika thumbnail di klik.

<div class="gallery">
    <!-- Big Gallery -->
    <div class="image-slide" id="slide1"><img src="images/slide/slide-1.jpg" alt="Slide 1"></div>
    <div class="image-slide" id="slide2"><img src="images/slide/slide-2.jpg" alt="Slide 2"></div>
    <div class="image-slide" id="slide3"><img src="images/slide/slide-3.jpg" alt="Slide 3"></div>
    <!-- /Big Gallery -->

    <!-- Gallery Thumbnail -->
    <ul class="image-list">
        <li>
            <a href="#slide1" title="Slide 1" id="link-slide1"><img src="images/thumb/slide1.jpg" alt="slide1"></a>
        </li>
        <li>
            <a href="#slide2" title="Slide 2" id="link-slide2"><img src="images/thumb/slide2.jpg" alt="slide2"></a>
        </li>
        <li>
            <a href="#slide3" title="Slide 2" id="link-slide3"><img src="images/thumb/slide3.jpg" alt="slide2"></a>
        </li>
    <ul>
    <!-- /Gallery Thumbnail -->
</div>

Setiap anchor di dalam gallery thumbnail saya beri id masing-masing, ini berfungsi nanti saat thumbnail dalam posisi active.

CSS

Pertama kita rapikan terlebih dahulu layout nya. Noise background dapat kamu slice dari file PSD atau ambil dari source code dari saya.

html {
    background: url(images/background-noise.jpg)
}
.gallery {
    width: 640px;
    position: relative;
    margin: 60px auto 0
}
.image-slide {
    width: 400px;
    height: 235px;
    position: absolute
}
.image-list {
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 240px;
    list-style: none;
    position: absolute
}
.image-list li {
    float: left;
    position: relative;
    margin: 0 0 10px 10px
}
.image-list img {
    display: block
}

Sampai sini gallery kamu akan terlihat seperti