نقاط روی عکس - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۴۸: | خط ۴۸: | ||
/* استایل کادر اطلاعات (پاپآپ) */ | /* استایل کادر اطلاعات (پاپآپ) */ | ||
.hotspot-card { | .hotspot-card { | ||
box-sizing: border-box; | |||
position: absolute; | position: absolute; | ||
bottom: calc(100% + 12px); /* نمایش در بالای نقطه */ | bottom: calc(100% + 12px); /* نمایش در بالای نقطه */ | ||
| خط ۵۶: | خط ۵۷: | ||
border-radius: 12px; | border-radius: 12px; | ||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); | box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); | ||
padding: | padding: 10px; | ||
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
| خط ۶۲: | خط ۶۳: | ||
z-index: 20; | z-index: 20; | ||
pointer-events: none; /* غیرفعال در حالت عادی جهت جلوگیری از تداخل */ | pointer-events: none; /* غیرفعال در حالت عادی جهت جلوگیری از تداخل */ | ||
display: flex; | |||
flex-direction: column; | |||
} | } | ||
| خط ۷۴: | خط ۷۷: | ||
border-style: solid; | border-style: solid; | ||
border-color: #ffffff transparent transparent transparent; | border-color: #ffffff transparent transparent transparent; | ||
} | } | ||
| خط ۹۱: | خط ۸۹: | ||
/* استایلهای داخل کادر */ | /* استایلهای داخل کادر */ | ||
.hotspot-card__image { | .hotspot-card__image { | ||
box-sizing: border-box; | |||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
| خط ۱۰۰: | خط ۹۹: | ||
.hotspot-card__content { | .hotspot-card__content { | ||
padding: 4px; | box-sizing: border-box; | ||
display: block; | |||
width: 100%; | |||
padding: 4px 0 0 0; | |||
text-align: center; | text-align: center; | ||
} | } | ||
| خط ۱۱۴: | خط ۱۱۶: | ||
.hotspot-card__description { | .hotspot-card__description { | ||
display: block; | |||
margin: 0 0 12px 0; | margin: 0 0 12px 0; | ||
color: #64748b; | color: #64748b; | ||
| خط ۱۲۲: | خط ۱۲۵: | ||
/* دکمه اکشن (CTA) */ | /* دکمه اکشن (CTA) */ | ||
.hotspot-card__cta { | .hotspot-card__cta { | ||
box-sizing: border-box; | |||
display: block; | display: block; | ||
width: 100%; | width: 100%; | ||
padding: 8px 0; | padding: 8px 0; | ||
background-color: #0f172a; | background-color: #0f172a; | ||
| خط ۱۹۰: | خط ۱۹۳: | ||
</div> | </div> | ||
<!-- نقطه دوم (شلوار نخی تابستانه) --> | <!-- # نقطه دوم (شلوار نخی تابستانه) --> | ||
<div class="hotspot-wrapper" style="--x: 58%; --y: 59%;"> | <div class="hotspot-wrapper" style="--x: 58%; --y: 59%;"> | ||
<button | <button | ||
نسخهٔ ۱۹ ژوئیهٔ ۲۰۲۶، ساعت ۱۰:۲۳
