پرش به محتوا

نقاط روی عکس - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>گالری ست نخی تابستانه - پوشاک سجاد</title>
    <style>
        * {
            box-sizing: border-box;
        }
 
        body {
            margin: 0;
            font-family: iransans, Arial, sans-serif;
            background: #ffffff;
        }
 
        .interactive-gallery {
            width: min(100%, 1280px);
            margin: 40px auto;
            padding: 0 12px;
        }
 
        .interactive-gallery__grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
        }
 
        .interactive-image {
            position: relative;
            width: 100%;
            height: 420px; /* هولدر ثابت */
            margin: 0;
            border-radius: 16px;
            overflow: hidden;
            background: #f8fafc;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            isolation: isolate;
        }
 
        .interactive-image__main {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain; /* عکس کامل دیده شود */
            object-position: center center; /* وسط هولدر */
            background: #f8fafc;
        }
 
        .hotspot-wrapper {
            position: absolute;
            left: var(--x);
            top: var(--y);
            z-index: 5;
        }
 
        .hotspot-wrapper:hover {
            z-index: 20;
        }
 
        .image-hotspot {
            width: 20px;
            height: 20px;
            padding: 0;
            border: 3px solid #ffffff;
            border-radius: 50%;
            background-color: #e11d48;
            cursor: pointer;
            transform: translate(-50%, -50%);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            display: block;
        }
 
        .hotspot-card {
            position: absolute;
            top: calc(100% + 14px);
            left: 50%;
            transform: translateX(-50%);
            width: 240px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
            padding: 12px;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
            display: flex;
            flex-direction: column;
        }
 
        .hotspot-card::before {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 9px;
            border-style: solid;
            border-color: transparent transparent #ffffff transparent;
        }
 
        .hotspot-wrapper:hover .hotspot-card {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }


<div class="gallery-container">
        .hotspot-card__image {
    <div class="gallery-item">
            width: 100%;
        <img src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی تابستانه سجاد" loading="lazy">
            height: 140px;
    </div>
            object-fit: cover;
    <div class="gallery-item">
            border-radius: 8px;
        <img src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="شلوار نخی تابستانه سجاد" loading="lazy">
            margin-bottom: 10px;
    </div>
            display: block;
    <div class="gallery-item">
        }
        <img src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="ست کامل تابستانه پوشاک سجاد" loading="lazy">
    </div>
</div>


<style>
        .hotspot-card__title {
    .gallery-container {
            display: block;
        display: grid;
            font-size: 15px;
        /* استفاده از clamp برای انعطاف پذیری عالی بین موبایل و دسکتاپ */
            font-weight: 700;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            color: #1e293b;
        gap: 20px;
            margin-bottom: 6px;
        padding: 20px;
            text-align: center;
        max-width: 1200px;
            line-height: 1.7;
        margin: 0 auto;
        }
    }


    .gallery-item {
        .hotspot-card__description {
        overflow: hidden;
            font-size: 13px;
        border-radius: 16px; /* گوشه‌های گرد */
            color: #64748b;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            margin: 0 0 14px;
        transition: transform 0.3s ease;
            text-align: center;
    }
            line-height: 1.8;
        }


    .gallery-item img {
        .hotspot-card__cta {
        width: 100%;
            display: block;
        height: 300px; /* ارتفاع ثابت برای یکدستی */
            width: 100%;
        object-fit: cover; /* حفظ نسبت تصویر بدون دفرمه شدن */
            padding: 10px 0;
        display: block;
            background-color: #0f172a;
        transition: transform 0.5s ease;
            color: #ffffff;
    }
            text-align: center;
            text-decoration: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 700;
        }


    .gallery-item:hover {
        .sr-only {
        transform: translateY(-5px);
            position: absolute;
    }
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
            white-space: nowrap;
        }


    .gallery-item:hover img {
        /* تبلت */
        transform: scale(1.05); /* افکت زوم ملایم برای جذابیت بیشتر */
        @media (max-width: 992px) {
    }
            .interactive-gallery__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }


    /* تنظیم برای موبایل‌های خیلی کوچک */
            .interactive-image {
    @media (max-width: 480px) {
                height: 380px;
        .gallery-container {
            }
            grid-template-columns: 1fr; /* تک ستونه در موبایل */
         }
         }
         .gallery-item img {
 
             height: 250px;
        /* موبایل */
         @media (max-width: 640px) {
            .interactive-gallery {
                padding: 0 10px;
                margin: 24px auto;
            }
 
            .interactive-gallery__grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
 
            .interactive-image {
                height: 340px;
            }
 
             .hotspot-card {
                width: 220px;
            }
 
            .hotspot-card__image {
                height: 120px;
            }
         }
         }
     }
     </style>
</style>
</head>
<body>


<section class="interactive-gallery" aria-label="گالری محصولات پوشاک سجاد">
    <div class="interactive-gallery__grid">
        <!-- عکس اول -->
        <figure class="interactive-image">
            <img
                class="interactive-image__main"
                src="https://dl.faraghaib.ir/m/101/m101shalvarset7-1.jpg"
                alt="ست نخی تابستانه مردانه پوشاک سجاد"
                loading="lazy"
                decoding="async"
            />
            <div class="hotspot-wrapper" style="--x: 40%; --y: 25%;">
                <button class="image-hotspot" type="button" aria-label="مشاهده اطلاعات بلوز نخی تابستانه">
                    <span class="sr-only">اطلاعات بلوز نخی تابستانه</span>
                </button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی تابستانه سجاد" loading="lazy" decoding="async" />
                    <strong class="hotspot-card__title">بلوز نخی تابستانه سجاد</strong>
                    <p class="hotspot-card__description">جنس ۱۰۰٪ پنبه با تن‌خور خنک و مناسب فصل تابستان</p>
                    <a href="#" class="hotspot-card__cta">مشاهده محصول</a>
                </div>
            </div>
            <div class="hotspot-wrapper" style="--x: 62%; --y: 65%;">
                <button class="image-hotspot" type="button" aria-label="مشاهده اطلاعات شلوار نخی تابستانه">
                    <span class="sr-only">اطلاعات شلوار نخی تابستانه</span>
                </button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="شلوار نخی تابستانه سجاد" loading="lazy" decoding="async" />
                    <strong class="hotspot-card__title">شلوار نخی تابستانه سجاد</strong>
                    <p class="hotspot-card__description">طراحی راحت و ایده‌آل برای استایل تابستانه روزمره</p>
                    <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a>
                </div>
            </div>
        </figure>
        <!-- عکس دوم -->
        <figure class="interactive-image">
            <img
                class="interactive-image__main"
                src="https://dl.faraghaib.ir/m/101/m101shalvarset9-1.jpg"
                alt="بلوز تابستانه مردانه پوشاک سجاد"
                loading="lazy"
                decoding="async"
            />
            <div class="hotspot-wrapper" style="--x: 35%; --y: 25%;">
                <button class="image-hotspot" type="button" aria-label="مشاهده اطلاعات پارچه بلوز">
                    <span class="sr-only">اطلاعات پارچه بلوز</span>
                </button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="پارچه بلوز نخی سجاد" loading="lazy" decoding="async" />
                    <strong class="hotspot-card__title">پارچه نخی خنک</strong>
                    <p class="hotspot-card__description">پارچه نرم، سبک و مناسب استفاده روزانه در هوای گرم</p>
                    <a href="#" class="hotspot-card__cta">مشاهده جزئیات</a>
                </div>
            </div>
            <div class="hotspot-wrapper" style="--x: 62%; --y: 66%;">
                <button class="image-hotspot" type="button" aria-label="مشاهده اطلاعات دوخت بلوز">
                    <span class="sr-only">اطلاعات دوخت بلوز</span>
                </button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="دوخت و تن خور بلوز سجاد" loading="lazy" decoding="async" />
                    <strong class="hotspot-card__title">دوخت تمیز و تن‌خور مناسب</strong>
                    <p class="hotspot-card__description">فرم ایستایی مناسب با دوخت باکیفیت برای استایل تابستانی</p>
                    <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a>
                </div>
            </div>
        </figure>
        <!-- عکس سوم -->
        <figure class="interactive-image">
            <img
                class="interactive-image__main"
                src="https://dl.faraghaib.ir/m/101/m101shalvarset8-1.jpg"
                alt="شلوار تابستانه مردانه پوشاک سجاد"
                loading="lazy"
                decoding="async"
            />
            <div class="hotspot-wrapper" style="--x: 48%; --y: 35%;">
                <button class="image-hotspot" type="button" aria-label="مشاهده اطلاعات جنس شلوار">
                    <span class="sr-only">اطلاعات جنس شلوار</span>
                </button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="جنس شلوار نخی تابستانه" loading="lazy" decoding="async" />
                    <strong class="hotspot-card__title">جنس سبک و راحت</strong>
                    <p class="hotspot-card__description">مناسب استفاده روزمره با حس راحتی بالا در طول روز</p>
                    <a href="#" class="hotspot-card__cta">مشاهده محصول</a>
                </div>
            </div>
            <div class="hotspot-wrapper" style="--x: 66%; --y: 65%;">
                <button class="image-hotspot" type="button" aria-label="مشاهده اطلاعات فرم شلوار">
                    <span class="sr-only">اطلاعات فرم شلوار</span>
                </button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="فرم و استایل شلوار سجاد" loading="lazy" decoding="async" />
                    <strong class="hotspot-card__title">فرم مناسب استایل تابستانه</strong>
                    <p class="hotspot-card__description">طراحی خوش‌فرم برای ست شدن با تیشرت و بلوز تابستانی</p>
                    <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a>
                </div>
            </div>
        </figure>
    </div>
</section>


</body>
</html>
</html>

نسخهٔ ‏۱۹ ژوئیهٔ ۲۰۲۶، ساعت ۱۳:۵۸

گالری ست نخی تابستانه - پوشاک سجاد

ست نخی تابستانه مردانه پوشاک سجاد
بلوز نخی تابستانه سجاد بلوز نخی تابستانه سجاد

جنس ۱۰۰٪ پنبه با تن‌خور خنک و مناسب فصل تابستان

مشاهده محصول
شلوار نخی تابستانه سجاد شلوار نخی تابستانه سجاد

طراحی راحت و ایده‌آل برای استایل تابستانه روزمره

دریافت اطلاعات
بلوز تابستانه مردانه پوشاک سجاد
پارچه بلوز نخی سجاد پارچه نخی خنک

پارچه نرم، سبک و مناسب استفاده روزانه در هوای گرم

مشاهده جزئیات
دوخت و تن خور بلوز سجاد دوخت تمیز و تن‌خور مناسب

فرم ایستایی مناسب با دوخت باکیفیت برای استایل تابستانی

دریافت اطلاعات
شلوار تابستانه مردانه پوشاک سجاد
جنس شلوار نخی تابستانه جنس سبک و راحت

مناسب استفاده روزمره با حس راحتی بالا در طول روز

مشاهده محصول
فرم و استایل شلوار سجاد فرم مناسب استایل تابستانه

طراحی خوش‌فرم برای ست شدن با تیشرت و بلوز تابستانی

دریافت اطلاعات

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:نقاط_روی_عکس&oldid=3410»