9B534B8686E580E0E01768F00155B461

at path：ROOT / wp-content / themes / kadu / assets / scss / components / _gallery.scss

run：R W Run

_about.scss

11.46 KB

2024-06-07 08:38:52

R W Run

_animation.scss

3.86 KB

2024-06-02 09:44:42

R W Run

_back-to-top.scss

1.11 KB

2024-04-25 09:34:42

R W Run

_blog-page.scss

26.83 KB

2024-06-11 06:51:22

R W Run

_blog.scss

11.77 KB

2024-06-06 04:16:02

R W Run

_breadcrumb.scss

2.53 KB

2024-06-12 03:56:04

R W Run

_button.scss

10.66 KB

2024-06-06 11:59:28

R W Run

_choose-us.scss

7.76 KB

2024-06-06 11:53:36

R W Run

_client.scss

4.37 KB

2024-05-28 11:54:48

R W Run

_contact-us.scss

3.81 KB

2024-06-11 08:55:10

R W Run

_counter.scss

3.1 KB

2024-05-30 05:51:10

R W Run

_course-details.scss

29.48 KB

2024-06-09 06:18:52

R W Run

_course.scss

34.5 KB

2024-06-04 06:49:00

R W Run

_cta.scss

6.27 KB

2024-06-06 05:12:08

R W Run

_error.scss

2.65 KB

2024-06-11 10:20:46

R W Run

_event-details.scss

9.96 KB

2024-06-10 05:05:32

R W Run

_event.scss

7.68 KB

2024-06-09 11:06:54

R W Run

_faq.scss

1.27 KB

2024-05-26 10:40:32

R W Run

_footer.scss

18.39 KB

2024-06-06 08:53:18

R W Run

_full-page-nav.scss

4.43 KB

2024-06-11 12:42:00

R W Run

_gallery.scss

3.55 KB

2024-06-10 06:49:40

R W Run

_header.scss

17.28 KB

2024-06-11 11:02:34

R W Run

_hero.scss

18.73 KB

2024-06-11 10:40:22

R W Run

_instructor-details.scss

5.15 KB

2024-06-09 09:15:04

R W Run

_popular-category.scss

12.24 KB

2024-06-06 09:59:08

R W Run

_preloader.scss

621 By

2024-05-28 04:48:48

R W Run

_price.scss

9.83 KB

2024-05-30 05:52:22

R W Run

_privacy-page.scss

1.33 KB

2024-06-11 09:15:36

R W Run

_search.scss

3.03 KB

2024-06-11 10:42:44

R W Run

_services.scss

10.43 KB

2024-06-03 04:06:10

R W Run

_team.scss

9.23 KB

2024-06-09 06:56:08

R W Run

_testimonial.scss

12.14 KB

2024-06-06 10:34:22

R W Run

_title.scss

2.9 KB

2024-06-02 12:32:10

R W Run

_video-course.scss

4.96 KB

2024-05-30 10:54:24

R W Run

error_log

📄_gallery.scss

/* 
    gallery-start
*/
.kd-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(4, 350px);
    gap: 20px 20px;
    grid-template-areas:
        "item-1 item-2 item-2 item-3"
        "item-4 item-5 item-6 item-3"
        "item-7 item-8 item-9 item-10"
        "item-7 item-11 item-11 item-12";

@media #{$lg} {
            grid-template-rows: repeat(4, 250px);
        }

@media #{$md} {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: repeat(5, 250px);

grid-template-areas:
            "item-1 item-2 item-3"
            "item-4 item-5 item-3"
            "item-6 item-7 item-8"
            "item-6 item-9 item-10"
            "item-11 item-12 item-12";
        }

@media #{$xs} {
            grid-template-columns: 1fr;
            grid-template-rows: 250px;

grid-template-areas:
            "item-1"
            "item-2  "
            "item-3 "
            "item-4 "
            "item-5 "
            "item-6 "
            "item-7 "
            "item-8 "
            "item-9 "
            "item-10 "
            "item-11 "
            "item-12 ";
        }

@media #{$sm} {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 250px;

grid-template-areas:
            "item-1 item-2"
            "item-3 item-4 "
            "item-5 item-6"
            "item-7 item-8"
            "item-9 item-10"
            "item-11 item-12";
        }

.item-1 { grid-area: item-1; }
        .item-2 { grid-area: item-2; }
        .item-3 { grid-area: item-3; }
        .item-4 { grid-area: item-4; }
        .item-5 { grid-area: item-5; }
        .item-6 { grid-area: item-6; }
        .item-7 { grid-area: item-7; }
        .item-8 { grid-area: item-8; }
        .item-9 { grid-area: item-9; }
        .item-10 { grid-area: item-10; }
        .item-11 { grid-area: item-11; }
        .item-12 { grid-area: item-12; }
}

.kd-gallery {
    &-item {
        border-radius: 10px;
        position: relative;
        z-index: 1;

&::after {
            content: "";
            width: calc(100% - 15px);
            height: calc(100% - 15px);
            background: rgb(0 94 79 / 70%);
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 10px;
            transform: translate(-50% , -50%);
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            transition: .5s ease-in-out;
            opacity: 0;
        }

&-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 62px;
            height: 62px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% , -50%);
            border: 1px solid #fff;
            z-index: 1;
            border-radius: 50%;
            font-size: 20px;
            color: #fff;
            z-index: 1;
            transition: .5s ease-in-out;
            opacity: 0;

&:hover {
                border-color: transparent;
                background: var(--kd-clr-sd-1);
                color: #fff;
            }
        }

&:hover {
            &::after {
                opacity: 1;
            }

.kd-gallery-item-btn {
                opacity: 1;
            }
        }
    }
}

/* 
    gallery-end
*/