فراغیب

الگو:نقاط روی عکس: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html lang="fa" dir="rtl">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ست نخی تابستانه - پوشاک سجاد</title>
    <style>
        /* تنظیمات پایه */
        * { box-sizing: border-box; }


        .interactive-image {
<div class="gallery-container">
            position: relative;
    <div class="gallery-item">
            width: min(100%, 800px);
        <img src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی تابستانه سجاد" loading="lazy">
            margin: 40px auto;
    </div>
            font-family: iransans, Arial, sans-serif;
    <div class="gallery-item">
            /* ایجاد یک محیط لایه‌بندی جدید */
         <img src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="شلوار نخی تابستانه سجاد" loading="lazy">
            isolation: isolate;
    </div>
        }
    <div class="gallery-item">
 
        <img src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="ست کامل تابستانه پوشاک سجاد" loading="lazy">
        .interactive-image__main {
    </div>
            display: block;
</div>
            width: 100%;
            height: auto;
            border-radius: 14px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
 
        /* نگهدارنده نقطه و کارت */
        .hotspot-wrapper {
            position: absolute;
            left: var(--x);
            top: var(--y);
            /* Z-index پایین در حالت عادی */
            z-index: 5;
        }
 
         /* افزایش اولویت لایه هنگام هاور شدن */
        .hotspot-wrapper:hover {
            z-index: 100; /* این باعث می‌شود کادر روی همه نقاط دیگر قرار بگیرد */
        }
 
        /* استایل نقطه قرمز */
        .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% + 15px);
            left: 50%;
            transform: translateX(-50%) translateY(-10px);
            width: 260px;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            padding: 12px;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease;
            pointer-events: none;
            display: flex;
            flex-direction: column;
        }


        /* مثلث کوچک بالای کادر */
<style>
        .hotspot-card::before {
    .gallery-container {
            content: '';
        display: grid;
            position: absolute;
        /* استفاده از clamp برای انعطاف پذیری عالی بین موبایل و دسکتاپ */
            bottom: 100%;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            left: 50%;
        gap: 20px;
            transform: translateX(-50%);
        padding: 20px;
            border-width: 10px;
        max-width: 1200px;
            border-style: solid;
        margin: 0 auto;
            border-color: transparent transparent #ffffff transparent;
    }
        }


        /* نمایش کادر با هاور */
    .gallery-item {
        .hotspot-wrapper:hover .hotspot-card {
        overflow: hidden;
            visibility: visible;
        border-radius: 16px; /* گوشه‌های گرد */
            opacity: 1;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transform: translateX(-50%) translateY(0);
        transition: transform 0.3s ease;
            pointer-events: auto;
    }
        }


        /* محتوای داخلی کادر */
    .gallery-item img {
        .hotspot-card__image {
        width: 100%;
            width: 100%;
        height: 300px; /* ارتفاع ثابت برای یکدستی */
            height: 150px;
        object-fit: cover; /* حفظ نسبت تصویر بدون دفرمه شدن */
            object-fit: cover;
        display: block;
            border-radius: 8px;
        transition: transform 0.5s ease;
            margin-bottom: 10px;
    }
        }


        .hotspot-card__title {
    .gallery-item:hover {
            display: block;
         transform: translateY(-5px);
            font-size: 15px;
    }
            font-weight: bold;
            color: #1e293b;
            margin-bottom: 6px;
            text-align: center;
        }
 
         .hotspot-card__description {
            font-size: 13px;
            color: #64748b;
            margin-bottom: 15px;
            text-align: center;
            line-height: 1.6;
        }


        .hotspot-card__cta {
    .gallery-item:hover img {
            display: block;
        transform: scale(1.05); /* افکت زوم ملایم برای جذابیت بیشتر */
            width: 100%;
    }
            padding: 10px 0;
            background-color: #0f172a;
            color: #ffffff;
            text-align: center;
            text-decoration: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: bold;
            transition: background 0.2s;
        }


         .hotspot-card__cta:hover {
    /* تنظیم برای موبایل‌های خیلی کوچک */
             background-color: #334155;
    @media (max-width: 480px) {
         .gallery-container {
             grid-template-columns: 1fr; /* تک ستونه در موبایل */
         }
         }
 
         .gallery-item img {
        /* ریسپانسیو موبایل */
             height: 250px;
         @media (max-width: 600px) {
            .hotspot-card { width: 220px; }
             .hotspot-card__image { height: 120px; }
         }
         }
     </style>
     }
</head>
</style>
<body>
 
<div class="interactive-image">
    <!-- تصویر اصلی -->
    <img class="interactive-image__main" src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="ست نخی تابستانه سجاد">


    <!-- نقطه اول -->
    <div class="hotspot-wrapper" style="--x: 45%; --y: 29%;">
        <div class="image-hotspot"></div>
        <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: 58%; --y: 59%;">
        <div class="image-hotspot"></div>
        <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>
</div>


</body>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:نقاط_روی_عکس»