کانتینر حذف هایلایت - فراغیب


<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>نمونه پروژه‌ها و محصولات</title>
<meta name="description" content="مشاهده نمونه پروژه‌ها، محصولات و خدمات با تصاویر و اطلاعات کامل.">

<!-- Font Awesome -->
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

<style>

/* =========================================================
   PROJECT GALLERY - MOBILE FIRST
========================================================= */

.project-gallery{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:15px;
    box-sizing:border-box;
    font-family:IRANSans,Tahoma,Arial,sans-serif;
}

/* گرید اصلی
   موبایل = یک ستون
   تعداد کارت‌ها با اضافه/حذف article به صورت خودکار تنظیم می‌شود
*/
.project-gallery__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:2px;
}

/* =========================================================
   CARD
========================================================= */

.project-card{
    position:relative;
    overflow:hidden;
    min-width:0;
    height:320px;
    background:#eee;
}

/* تصویر */
.project-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
}

/* =========================================================
   لایه طوسی پایین تصویر
========================================================= */

.project-card__overlay{
    position:absolute;
    z-index:2;
    right:0;
    bottom:0;
    left:0;

    min-height:105px;
    padding:18px 18px 12px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    box-sizing:border-box;

    background:rgba(65,65,65,.48);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;
}

/* عنوان */
.project-card__title{
    margin:0 0 5px;
    color:#fff;
    font-size:16px;
    line-height:1.7;
    font-weight:700;
    text-align:right;
}

/* توضیح */
.project-card__description{
    margin:0;
    color:rgba(255,255,255,.8);
    font-size:11px;
    line-height:1.8;
    text-align:right;
}

/* =========================================================
   ICONS
========================================================= */

.project-card__actions{
    position:absolute;
    z-index:5;
    left:0;
    bottom:0;

    display:flex;
    direction:ltr;
}

.project-card__button{
    width:46px;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.45);
    background:rgba(255,255,255,.08);

    color:#fff;
    text-decoration:none;

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease;
}

.project-card__button i{
    font-size:17px;
}

/* =========================================================
   HOVER - فقط دسکتاپ
========================================================= */

@media (hover:hover) and (pointer:fine){

    .project-card:hover img{
        transform:scale(1.025);
    }

    /* محو شدن لایه طوسی */
    .project-card:hover .project-card__overlay{
        opacity:0;
        visibility:hidden;
        transform:translateY(10px);
    }

    /* زرد شدن آیکون‌ها */
    .project-card:hover .project-card__button{
        background:#ffbd00;
        border-color:#ffbd00;
        color:#fff;
    }

    .project-card__button:hover{
        background:#f5aa00;
        border-color:#f5aa00;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (min-width:600px){

    .project-gallery{
        padding:20px;
    }

    .project-gallery__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:2px;
    }

    .project-card{
        height:330px;
    }
}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width:900px){

    .project-gallery{
        padding:25px;
    }

    .project-gallery__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .project-card{
        height:380px;
    }

    .project-card__title{
        font-size:17px;
    }

    .project-card__description{
        font-size:12px;
    }
}

/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width:1200px){

    .project-gallery__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .project-card{
        height:410px;
    }
}


/* =========================================================
   LIGHTBOX
========================================================= */

.project-lightbox{
    position:fixed;
    z-index:999999;

    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:25px;

    box-sizing:border-box;

    background:rgba(0,0,0,.88);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.project-lightbox.is-active{
    opacity:1;
    visibility:visible;
}

/* تصویر داخل لایت‌باکس */

.project-lightbox__image{
    display:block;

    max-width:95vw;
    max-height:90vh;

    width:auto;
    height:auto;

    object-fit:contain;

    border-radius:4px;

    box-shadow:0 15px 50px rgba(0,0,0,.5);

    transform:scale(.96);
    transition:transform .3s ease;
}

.project-lightbox.is-active .project-lightbox__image{
    transform:scale(1);
}

/* دکمه بستن */

.project-lightbox__close{
    position:absolute;

    top:15px;
    right:20px;

    width:45px;
    height:45px;

    border:0;
    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:28px;
    line-height:1;

    cursor:pointer;

    border-radius:50%;

    transition:
        background .3s ease,
        color .3s ease;
}

.project-lightbox__close:hover{
    background:#ffbd00;
    color:#fff;
}


/* =========================================================
   جلوگیری از اسکرول صفحه هنگام باز بودن تصویر
========================================================= */

body.lightbox-open{
    overflow:hidden;
}


/* =========================================================
   موبایل کوچک
========================================================= */

@media (max-width:380px){

    .project-gallery{
        padding:10px;
    }

    .project-card{
        height:280px;
    }

    .project-card__overlay{
        min-height:95px;
        padding:14px;
    }

    .project-card__title{
        font-size:14px;
    }

    .project-card__description{
        font-size:10px;
    }

    .project-card__button{
        width:42px;
        height:42px;
    }
}

</style>
</head>

<body>


<!-- =========================================================
     گالری پروژه‌ها
========================================================= -->

<section class="project-gallery"
         aria-label="نمونه پروژه‌ها و محصولات">

    <div class="project-gallery__grid">


        <!-- =================================================
             کارت شماره 1
             برای اضافه کردن کارت، همین article را کپی کنید
        ================================================== -->

        <article class="project-card">

            <img
                src="https://dl.faraghaib.ir/m/260023/260023-01-12.jpg"
                alt="طراحی و ساخت تجهیزات صنعتی و اکچویتور برقی"
                loading="lazy"
                decoding="async">

            <div class="project-card__overlay">

                <h2 class="project-card__title">
                    طراحی اولین اکچویتور برقی در ایران
                </h2>

                <p class="project-card__description">
                    طراحی، مهندسی، مونتاژ و ساخت تجهیزات و دستگاه صنعتی
                </p>

            </div>


            <!-- آیکون‌ها -->

            <div class="project-card__actions">

                <!-- مشاهده تصویر -->
                <button
                    type="button"
                    class="project-card__button js-lightbox"
                    data-image="https://dl.faraghaib.ir/m/260023/260023-01-12.jpg"
                    aria-label="مشاهده تصویر طراحی اکچویتور">

                    <i class="fa-solid fa-magnifying-glass"
                       aria-hidden="true"></i>

                </button>


                <!-- انتقال به صفحه -->
                <a
                    href="/page-1"
                    class="project-card__button"
                    aria-label="مشاهده صفحه طراحی اکچویتور">

                    <i class="fa-regular fa-file"
                       aria-hidden="true"></i>

                </a>

            </div>

        </article>



        <!-- =================================================
             کارت شماره 2
        ================================================== -->

        <article class="project-card">

            <img
                src="https://dl.faraghaib.ir/m/260023/260023-01-06.jpg"
                alt="قالب سازی و تولید فن و قطعه فایبرگلاس"
                loading="lazy"
                decoding="async">

            <div class="project-card__overlay">

                <h2 class="project-card__title">
                    قالب سازی، تولید فن و قطعه فایبرگلاس
                </h2>

                <p class="project-card__description">
                    ساخت فن و تولید قطعات فایبرگلاس با کیفیت بالا
                </p>

            </div>


            <div class="project-card__actions">

                <button
                    type="button"
                    class="project-card__button js-lightbox"
                    data-image="https://dl.faraghaib.ir/m/260023/260023-01-06.jpg"
                    aria-label="مشاهده تصویر قالب سازی و قطعات فایبرگلاس">

                    <i class="fa-solid fa-magnifying-glass"
                       aria-hidden="true"></i>

                </button>


                <a
                    href="/page-2"
                    class="project-card__button"
                    aria-label="مشاهده صفحه قالب سازی و تولید فایبرگلاس">

                    <i class="fa-regular fa-file"
                       aria-hidden="true"></i>

                </a>

            </div>

        </article>



        <!-- =================================================
             کارت شماره 3 - نمونه
             برای اضافه کردن کارت‌های بیشتر فقط این بخش را
             کپی کنید.
        ================================================== -->

        <article class="project-card">

            <img
                src="https://dl.faraghaib.ir/m/260023/260023-01-09.jpg"
                alt="نمونه پروژه سوم"
                loading="lazy"
                decoding="async">

            <div class="project-card__overlay">

                <h2 class="project-card__title">
                    عنوان پروژه سوم
                </h2>

                <p class="project-card__description">
                    توضیح کوتاه و سئو شده درباره پروژه سوم
                </p>

            </div>

            <div class="project-card__actions">

                <button
                    type="button"
                    class="project-card__button js-lightbox"
                    data-image="https://dl.faraghaib.ir/m/260023/260023-01-09.jpg"
                    aria-label="مشاهده تصویر پروژه سوم">

                    <i class="fa-solid fa-magnifying-glass"
                       aria-hidden="true"></i>

                </button>

                <a
                    href="/page-3"
                    class="project-card__button"
                    aria-label="مشاهده صفحه پروژه سوم">

                    <i class="fa-regular fa-file"
                       aria-hidden="true"></i>

                </a>

            </div>

        </article>


    </div>

</section>



<!-- =========================================================
     LIGHTBOX
========================================================= -->

<div
    class="project-lightbox"
    id="projectLightbox"
    role="dialog"
    aria-modal="true"
    aria-label="نمایش تصویر بزرگ">

    <button
        type="button"
        class="project-lightbox__close"
        id="lightboxClose"
        aria-label="بستن تصویر">

        &times;

    </button>

    <img
        class="project-lightbox__image"
        id="lightboxImage"
        src="https://dl.faraghaib.ir/m/260023/260023-01-05.jpg"
        alt="تصویر بزرگ پروژه">

</div>



<script>

/* =========================================================
   LIGHTBOX
========================================================= */

(function(){

    const lightbox = document.getElementById("projectLightbox");
    const lightboxImage = document.getElementById("lightboxImage");
    const closeButton = document.getElementById("lightboxClose");

    const buttons = document.querySelectorAll(".js-lightbox");


    /* باز کردن تصویر */

    buttons.forEach(function(button){

        button.addEventListener("click",function(){

            const imageURL = this.getAttribute("data-image");

            if(!imageURL) return;

            lightboxImage.src = imageURL;

            lightbox.classList.add("is-active");

            document.body.classList.add("lightbox-open");

            closeButton.focus();

        });

    });


    /* بستن */

    function closeLightbox(){

        lightbox.classList.remove("is-active");

        document.body.classList.remove("lightbox-open");

        setTimeout(function(){

            lightboxImage.src = "";

        },300);

    }


    closeButton.addEventListener("click",closeLightbox);


    /* کلیک روی فضای بیرونی */

    lightbox.addEventListener("click",function(event){

        if(event.target === lightbox){

            closeLightbox();

        }

    });


    /* بستن با ESC */

    document.addEventListener("keydown",function(event){

        if(
            event.key === "Escape" &&
            lightbox.classList.contains("is-active")
        ){

            closeLightbox();

        }

    });

})();

</script>

</body>
</html>