گالری تصاویر

ساخت گالری تصاویر واکنش‌گرا با CSS Grid و Flexbox و افکت‌های hover

گالری تصاویر با CSS

گالری تصاویر یکی از پرکاربردترین کامپوننت‌های وب است. با CSS مدرن می‌توان گالری‌های زیبا و واکنش‌گرا ساخت.

۱. گالری با CSS Grid ⭐

.gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .gallery img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 12px;
        transition: transform 0.3s;
    }
    
    .gallery img:hover {
        transform: scale(1.05);
    }

۲. گالری با Flexbox

.gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .gallery .item {
        flex: 1 1 250px;
    }

۳. گالری Masonry

.masonry {
        column-count: 3;
        column-gap: 15px;
    }
    
    .masonry img {
        width: 100%;
        margin-bottom: 15px;
        border-radius: 12px;
    }

افکت‌های Hover

/* زوم + اوورلی */
    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
    }
    
    .gallery-item img {
        transition: transform 0.4s;
    }
    
    .gallery-item:hover img {
        transform: scale(1.1);
    }
    
    .gallery-item::after {
        content: "مشاهده";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.6);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .gallery-item:hover::after {
        opacity: 1;
    }

گالری Lightbox با CSS-only

/* با target selector */
    #img1:target {
        display: block;
    }
    
    .lightbox {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.9);
        z-index: 9999;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط