پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>


<div class="gallery-container">
<html lang="fa" dir="rtl">
     <div class="gallery-item">
<head>
        <img src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی تابستانه سجاد" loading="lazy">
     <meta charset="UTF-8" />
     </div>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <div class="gallery-item">
     <title>گالری ست نخی تابستانه - پوشاک سجاد</title>
         <img src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="شلوار نخی تابستانه سجاد" loading="lazy">
     <style>
    </div>
        * { box-sizing: border-box; }
    <div class="gallery-item">
 
         <img src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="ست کامل تابستانه پوشاک سجاد" loading="lazy">
        body {
    </div>
            margin: 0;
</div>
            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;
            background: #f8fafc;
            /* حذف overflow: hidden برای اینکه کادرها روی بقیه عکس‌ها باز شوند */
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
        }
 
        .interactive-image__main {
            max-width: 100%;
            max-height: 100%;
            display: block;
            object-fit: contain;
            border-radius: 16px; /* گوشه گرد مستقیم روی عکس */
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }
 
        /* بخش مدیریت نقاط */
        .hotspot-wrapper {
            position: absolute;
            left: var(--x);
            top: var(--y);
            z-index: 10;
        }
 
        /* وقتی روی یک عکس یا نقطه آن هستید، لایه آن بالاتر از بقیه قرار می‌گیرد */
        .interactive-image:hover {
            z-index: 50;
        }
 
        .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.25);
            padding: 12px;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            z-index: 100; /* اطمینان از قرارگیری روی همه چیز */
        }
 
        .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;
        }


<style>
        .hotspot-card__image {
    .gallery-container {
            width: 100%;
        display: grid;
            height: 140px;
        /* استفاده از clamp برای انعطاف پذیری عالی بین موبایل و دسکتاپ */
            object-fit: cover;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            border-radius: 8px;
        gap: 20px;
            margin-bottom: 10px;
        padding: 20px;
         }
        max-width: 1200px;
         margin: 0 auto;
    }


    .gallery-item {
        .hotspot-card__title {
        overflow: hidden;
            display: block;
        border-radius: 16px; /* گوشه‌های گرد */
            font-size: 15px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            font-weight: 700;
        transition: transform 0.3s ease;
            color: #1e293b;
    }
            margin-bottom: 6px;
            text-align: center;
        }


    .gallery-item img {
        .hotspot-card__description {
        width: 100%;
            font-size: 13px;
        height: 300px; /* ارتفاع ثابت برای یکدستی */
            color: #64748b;
        object-fit: cover; /* حفظ نسبت تصویر بدون دفرمه شدن */
            margin: 0 0 14px;
        display: block;
            text-align: center;
        transition: transform 0.5s ease;
            line-height: 1.8;
    }
        }


    .gallery-item:hover {
        .hotspot-card__cta {
        transform: translateY(-5px);
            display: block;
    }
            width: 100%;
            padding: 10px 0;
            background-color: #0f172a;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 700;
        }


    .gallery-item:hover img {
        .sr-only {
        transform: scale(1.05); /* افکت زوم ملایم برای جذابیت بیشتر */
            position: absolute;
    }
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
            white-space: nowrap;
        }


    /* تنظیم برای موبایل‌های خیلی کوچک */
        /* ریسپانسیو تبلت و موبایل */
    @media (max-width: 480px) {
        @media (max-width: 992px) {
        .gallery-container {
            .interactive-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            grid-template-columns: 1fr; /* تک ستونه در موبایل */
            .interactive-image { height: 380px; }
         }
         }
         .gallery-item img {
 
             height: 250px;
         @media (max-width: 640px) {
            .interactive-gallery__grid { grid-template-columns: 1fr; }
             .interactive-image { height: 340px; }
            .hotspot-card { width: 210px; }
         }
         }
     }
     </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">
            <div class="hotspot-wrapper" style="--x: 40%; --y: 25%;">
                <button class="image-hotspot" type="button"></button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی">
                    <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"></button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="شلوار نخی">
                    <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">
            <div class="hotspot-wrapper" style="--x: 35%; --y: 25%;">
                <button class="image-hotspot" type="button"></button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset10.jpg" alt="پارچه بلوز">
                    <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"></button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason4.jpeg" alt="دوخت بلوز">
                    <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">
            <div class="hotspot-wrapper" style="--x: 48%; --y: 35%;">
                <button class="image-hotspot" type="button"></button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset11.jpg" alt="جنس شلوار">
                    <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"></button>
                <div class="hotspot-card">
                    <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason1.jpg" alt="فرم شلوار">
                    <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=3415»