نقاط روی عکس - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۵: | خط ۵: | ||
<title>گالری ست نخی تابستانه - پوشاک سجاد</title> | <title>گالری ست نخی تابستانه - پوشاک سجاد</title> | ||
<style> | <style> | ||
* { | * { box-sizing: border-box; } | ||
body { | body { | ||
| خط ۳۲: | خط ۳۰: | ||
height: 420px; /* هولدر ثابت */ | height: 420px; /* هولدر ثابت */ | ||
margin: 0; | margin: 0; | ||
background: #f8fafc; | |||
/* حذف overflow: hidden برای اینکه کادرها روی بقیه عکسها باز شوند */ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
border-radius: 16px; | border-radius: 16px; | ||
} | } | ||
.interactive-image__main { | .interactive-image__main { | ||
width: 100%; | max-width: 100%; | ||
height: 100%; | max-height: 100%; | ||
display: block; | display: block; | ||
object-fit: contain; | object-fit: contain; | ||
border-radius: 16px; /* گوشه گرد مستقیم روی عکس */ | |||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); | |||
} | } | ||
/* بخش مدیریت نقاط */ | |||
.hotspot-wrapper { | .hotspot-wrapper { | ||
position: absolute; | position: absolute; | ||
left: var(--x); | left: var(--x); | ||
top: var(--y); | top: var(--y); | ||
z-index: | z-index: 10; | ||
} | } | ||
. | /* وقتی روی یک عکس یا نقطه آن هستید، لایه آن بالاتر از بقیه قرار میگیرد */ | ||
z-index: | .interactive-image:hover { | ||
z-index: 50; | |||
} | } | ||
| خط ۸۰: | خط ۸۱: | ||
background: #ffffff; | background: #ffffff; | ||
border-radius: 12px; | border-radius: 12px; | ||
box-shadow: 0 18px 36px rgba(0, 0, 0, 0. | box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25); | ||
padding: 12px; | padding: 12px; | ||
visibility: hidden; | visibility: hidden; | ||
| خط ۸۸: | خط ۸۹: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
z-index: 100; /* اطمینان از قرارگیری روی همه چیز */ | |||
} | } | ||
| خط ۱۱۳: | خط ۱۱۵: | ||
border-radius: 8px; | border-radius: 8px; | ||
margin-bottom: 10px; | margin-bottom: 10px; | ||
} | } | ||
| خط ۱۲۳: | خط ۱۲۴: | ||
margin-bottom: 6px; | margin-bottom: 6px; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| خط ۱۵۹: | خط ۱۵۹: | ||
} | } | ||
/* تبلت */ | /* ریسپانسیو تبلت و موبایل */ | ||
@media (max-width: 992px) { | @media (max-width: 992px) { | ||
.interactive-gallery__grid { | .interactive-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } | ||
.interactive-image { height: 380px; } | |||
.interactive-image { | |||
} | } | ||
@media (max-width: 640px) { | @media (max-width: 640px) { | ||
.interactive-gallery__grid { grid-template-columns: 1fr; } | |||
.interactive-image { height: 340px; } | |||
.hotspot-card { width: 210px; } | |||
.interactive-gallery__grid { | |||
.interactive-image { | |||
.hotspot-card { | |||
} | } | ||
</style> | </style> | ||
| خط ۲۰۳: | خط ۱۷۹: | ||
<!-- عکس اول --> | <!-- عکس اول --> | ||
<figure class="interactive-image"> | <figure class="interactive-image"> | ||
<img | <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%;"> | <div class="hotspot-wrapper" style="--x: 40%; --y: 25%;"> | ||
<button class="image-hotspot" type="button | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="بلوز نخی"> | ||
<strong class="hotspot-card__title">بلوز نخی تابستانه سجاد</strong> | <strong class="hotspot-card__title">بلوز نخی تابستانه سجاد</strong> | ||
<p class="hotspot-card__description">جنس ۱۰۰٪ پنبه با تنخور خنک | <p class="hotspot-card__description">جنس ۱۰۰٪ پنبه با تنخور خنک</p> | ||
<a href="#" class="hotspot-card__cta">مشاهده محصول</a> | <a href="#" class="hotspot-card__cta">مشاهده محصول</a> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="hotspot-wrapper" style="--x: 62%; --y: 65%;"> | <div class="hotspot-wrapper" style="--x: 62%; --y: 65%;"> | ||
<button class="image-hotspot" type="button | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="شلوار نخی | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="شلوار نخی"> | ||
<strong class="hotspot-card__title">شلوار نخی تابستانه | <strong class="hotspot-card__title">شلوار نخی تابستانه</strong> | ||
<p class="hotspot-card__description">طراحی راحت و ایدهآل | <p class="hotspot-card__description">طراحی راحت و ایدهآل</p> | ||
<a href="#" class="hotspot-card__cta">دریافت اطلاعات</a> | <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a> | ||
</div> | </div> | ||
| خط ۲۳۸: | خط ۲۰۲: | ||
<!-- عکس دوم --> | <!-- عکس دوم --> | ||
<figure class="interactive-image"> | <figure class="interactive-image"> | ||
<img | <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%;"> | <div class="hotspot-wrapper" style="--x: 35%; --y: 25%;"> | ||
<button class="image-hotspot" type="button | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="پارچه بلوز | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset1.jpg" alt="پارچه بلوز"> | ||
<strong class="hotspot-card__title">پارچه نخی خنک</strong> | <strong class="hotspot-card__title">پارچه نخی خنک</strong> | ||
<p class="hotspot-card__description">پارچه | <p class="hotspot-card__description">پارچه نرم و سبک تابستانه</p> | ||
<a href="#" class="hotspot-card__cta">مشاهده جزئیات</a> | <a href="#" class="hotspot-card__cta">مشاهده جزئیات</a> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="hotspot-wrapper" style="--x: 62%; --y: 66%;"> | <div class="hotspot-wrapper" style="--x: 62%; --y: 66%;"> | ||
<button class="image-hotspot" type="button | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="دوخت | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="دوخت بلوز"> | ||
<strong class="hotspot-card__title">دوخت تمیز | <strong class="hotspot-card__title">دوخت تمیز</strong> | ||
<p class="hotspot-card__description"> | <p class="hotspot-card__description">تنخور عالی با دوخت صنعتی</p> | ||
<a href="#" class="hotspot-card__cta">دریافت اطلاعات</a> | <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a> | ||
</div> | </div> | ||
| خط ۲۷۳: | خط ۲۲۵: | ||
<!-- عکس سوم --> | <!-- عکس سوم --> | ||
<figure class="interactive-image"> | <figure class="interactive-image"> | ||
<img | <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%;"> | <div class="hotspot-wrapper" style="--x: 48%; --y: 35%;"> | ||
<button class="image-hotspot" type="button | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="جنس شلوار | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarsason3.jpg" alt="جنس شلوار"> | ||
<strong class="hotspot-card__title">جنس سبک و راحت</strong> | <strong class="hotspot-card__title">جنس سبک و راحت</strong> | ||
<p class="hotspot-card__description">مناسب استفاده | <p class="hotspot-card__description">مناسب برای استفاده طولانی مدت</p> | ||
<a href="#" class="hotspot-card__cta">مشاهده محصول</a> | <a href="#" class="hotspot-card__cta">مشاهده محصول</a> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="hotspot-wrapper" style="--x: 66%; --y: 65%;"> | <div class="hotspot-wrapper" style="--x: 66%; --y: 65%;"> | ||
<button class="image-hotspot" type="button | <button class="image-hotspot" type="button"></button> | ||
<div class="hotspot-card"> | <div class="hotspot-card"> | ||
<img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="فرم | <img class="hotspot-card__image" src="https://dl.faraghaib.ir/m/101/m101shalvarset.jpg" alt="فرم شلوار"> | ||
<strong class="hotspot-card__title"> | <strong class="hotspot-card__title">استایل تابستانه</strong> | ||
<p class="hotspot-card__description">طراحی خوشفرم | <p class="hotspot-card__description">طراحی خوشفرم و مدرن</p> | ||
<a href="#" class="hotspot-card__cta">دریافت اطلاعات</a> | <a href="#" class="hotspot-card__cta">دریافت اطلاعات</a> | ||
</div> | </div> | ||
نسخهٔ ۱۹ ژوئیهٔ ۲۰۲۶، ساعت ۱۴:۰۶
بلوز نخی تابستانه سجاد
شلوار نخی تابستانه
دوخت تمیز
