Membuat Accordion Slideshow menggunakan CSS

Membuat Accordion Slideshow menggunakan CSS

  09 January    Andika

---

Ini adalah salah satu CSS yang mampu membungkus beberapa gambar dalam sebuah tampilan yang atraktif yakni dengan memanfaatkan hover image. Efek yang ditampilkan adalah dengan menumpukan semua gambar dan gambar akan beralih ke ukuran penuh saat tersentuh kursor.

Untuk mendapatkan tampilan yang lebih maksimal dan sesuai dengan kebutuhan, tentu kamu harus mengedit settingan sesuai keinginan. Perlu di pahami, agar Slider seperti ini tampil dengan baik, sedapat mungkin, pakailah gambar dengan resolusi yang sama. di ikuti penyesuaian dengan width dan height pada CSS nya.

Berikut Demonya,


Langsung saja,

Kode CSSnya

.accordion {
    width:805px;
    height:320px;
    overflow:hidden;
    box-shadow:0 0 10px 1px rgba(0,0,0,1);
    -webkit-box-shadow:0 0 10px 1px rgba(0,0,0,1);
    -moz-box-shadow:0 0 10px 1px rgba(0,0,0,1);
}

.accordion ul {
    width:2000px;
}

.accordion li {
    position:relative;
    display:block;
    width:160px;
    float:left;
    border-left:1px solid #888;
    box-shadow:0 0 25px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow:0 0 25px 10px rgba(0,0,0,0.5);
    -moz-box-shadow:0 0 25px 10px rgba(0,0,0,0.5);
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
}

.accordion ul:hover li {
    width:40px;
}

.accordion ul li:hover {
    width:640px;
}

.accordion li img {
    display:block;
}

.judul-gambar {
    background:rgba(0,0,0,0.5);
    position:absolute;
    left:0;
    bottom:0;
    width:640px;
}

.judul-gambar a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:20px;
    font-size:16px;
}

Silahkan edit sesuai kebutuhan.

Kode HTMLnya

<div class="accordion">
    <ul>
        <li>
            <div class="judul-gambar">
                <a href="#">JUDUL GAMBAR 1</a>
            </div>
            <a href="#">
                <img src="URL GAMBAR"/>
            </a>
        </li>
        <li>
            <div class="judul-gambar">
                <a href="#">JUDUL GAMBAR 2</a>
            </div>
            <a href="#">
                <img src="URL GAMBAR"/>
            </a>
        </li>
        <li>
            <div class="judul-gambar">
                <a href="#">JUDUL GAMBAR 3</a>
            </div>
            <a href="#">
                <img src="URL GAMBAR"/>
            </a>
        </li>
        <li>
            <div class="judul-gambar">
                <a href="#">JUDUL GAMBAR 4</a>
            </div>
            <a href="#">
                <img src="URL GAMBAR"/>
            </a>
        </li>
        <li>
            <div class="judul-gambar">
                <a href="#">JUDUL GAMBAR 5</a>
            </div>
            <a href="#">
                <img src="URL GAMBAR"/>
            </a>
        </li>
    </ul>
</div>

Jangan lupa untuk mengganti # dengan url yang terkait dengan gambar atau postingan. Dan ganti juga JUDUL ~ URL GAMBAR dengan judul ~ url dari gambar yang ingin kamu tampilkan.

Untuk tampilannya sendiri sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!