Cara Membuat Image Gallery Dengan CSS Part 2

Hai Sobat... kali ini saya akan menunjukkan bagaimana membuat Image Gallery pada Web HTML dengan CSS, tanpa javaScript sama sekali loh..

Baiklah, langsung saja kita buat script untuk struktur HTML nya terlebih dulu, dibawah ini script nya :

<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>

         Dan selanjutnya, bagian yang terpenting yaitu bagian CSS nya. Langsung saja kita simak yuk..

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
}








       Apabila kalian meletakkannya dengan tepat, maka hasilnya akan seperti gambar dibawah ini :

Kurnia Dwi Sandra

Cara Membuat Image Gallery Dengan CSS Part 2