Hình xếp (Accordion) với CSS3

Xem demo Tải về

1. Cấu trúc HTML

Mỗi hình ảnh nằm trong một thẻ <figure> lồng nhau. Khi người dùng click vào từng hình (thực chất là input radio ẩn), phần còn lại sẽ đẩy sang bên phải và hiện tiêu đề ảnh.

<div class="ia-container">
    <figure><img src="img/1.jpg" alt="image01">
        <input type="radio" name="radio-set" checked="checked">
        <figcaption><span>True Colors</span></figcaption>
        <figure><img src="img/2.jpg" alt="image02">
            <input type="radio" name="radio-set">
            <figcaption><span>Honest Light</span></figcaption>
            ...
            <figure><img src="img/8.jpg" alt="image08">
                <input id="ia-selector-last" type="radio" name="radio-set">
                <figcaption><span>Happy Child</span></figcaption>
            </figure>
        </figure>
    </figure>
</div>

Lưu ý: Bạn có thể thay ảnh khác nhưng vẫn giữ cùng số lượng, hoặc tính lại width theo công thức dưới đây.

2. Cài đặt CSS cơ bản

Container chính

.ia-container {
    width: 685px; /* Tính toán theo công thức: (Số hình - 1) * 50 + 335 */
    margin: 60px auto 0;
    overflow: hidden;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
    border: 7px solid rgba(255,255,255,0.6);
}

Các hình ảnh

.ia-container figure {
    position: absolute;
    top: 0;
    left: 50px;
    width: 335px;
    margin: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
    transition: all 0.3s ease-in-out;
}

.ia-container > figure {
    position: relative;
    left: 0 !important;
}

.ia-container img {
    display: block;
    width: 100%;
}

3. Radio ẩn – điều khiển tương tác

Input radio dùng để trigger khi người dùng click vào hình.

.ia-container input {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 100;
    appearance: none;
}

.ia-container input:checked {
    width: 5px;
    left: auto;
    right: 0px;
}

.ia-container input:checked ~ figure {
    left: 335px;
    transition: all 0.7s ease-in-out;
}

4. Hiển thị tiêu đề ảnh khi chọn

.ia-container figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(87, 73, 81, 0.1);
    transition: all 0.2s linear;
}

.ia-container figcaption span {
    position: absolute;
    top: 40%;
    margin-top: -30px;
    left: 20px;
    right: 20px;
    text-align: center;
    background: rgba(87, 73, 81, 0.3);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    opacity: 0;
    transition: all 0.4s ease-in-out 0.5s;
}

.ia-container input:checked + figcaption span {
    top: 50%;
    opacity: 1;
}

5. Responsive cho màn hình nhỏ

@media screen and (max-width: 720px) {
    .ia-container {
        width: 540px;
    }
    .ia-container figure {
        left: 40px;
        width: 260px;
    }
    .ia-container input {
        width: 40px;
    }
    .ia-container input:checked ~ figure {
        left: 260px;
    }
}

@media screen and (max-width: 520px) {
    .ia-container {
        width: 320px;
    }
    .ia-container figure {
        left: 20px;
        width: 180px;
    }
    .ia-container input {
        width: 20px;
    }
    .ia-container input:checked ~ figure {
        left: 180px;
    }
}

Kết luận

• Accordion hình ảnh này hoạt động hoàn toàn bằng CSS – không cần JavaScript.
• Hiệu ứng mượt mà, có hỗ trợ hover và caption động.
• Phù hợp cho gallery, slideshow, hoặc giới thiệu sản phẩm sáng tạo.

Bạn có thể mở rộng thêm bằng cách kết hợp animation, hiệu ứng zoom nhẹ hoặc tích hợp plugin ảnh lớn khi click.

Chúc các bạn thành công!