کانتینر تغییر عکس - فراغیب
صفحهای تازه حاوی «<html> <!-- ========================================= گالری محصولات | 3 عکس در هر ردیف بدون متن و توضیحات ========================================= --> <section class="product-gallery" aria-label="گالری تصاویر محصولات"> <div class="product-grid"> <!-- ================= کارت 1 ================= --> <div class="product-card"> <div class="product-imag...» ایجاد کرد |
بدون خلاصۀ ویرایش |
||
| خط ۳۲۳: | خط ۳۲۳: | ||
} | } | ||
/* ================================ | |||
/* | |||
تصاویر | تصاویر | ||
================================ */ | |||
.product-image { | .product-image { | ||
position: absolute; | position: absolute; | ||
inset: 0; | inset: 0; | ||
| خط ۳۴۱: | خط ۳۳۸: | ||
object-fit: cover; | object-fit: cover; | ||
transition: | /* فقط محو شدن */ | ||
transition: opacity 0.6s ease; | |||
/* جلوگیری کامل از Scale */ | |||
transform: none !important; | |||
} | } | ||
/* تصویر دوم در | /* تصویر دوم در حالت عادی مخفی */ | ||
.image-two { | .image-two { | ||
opacity: 0; | opacity: 0; | ||
} | } | ||
/* | /* ================================ | ||
هاور دسکتاپ | |||
================================ */ | |||
@media (min-width: 769px) { | @media (min-width: 769px) { | ||
/* تصویر اول هنگام هاور محو شود */ | |||
.product-image-box:hover .image-one { | .product-image-box:hover .image-one { | ||
opacity: 0; | |||
transform: none !important; | |||
} | |||
/* تصویر دوم هنگام هاور ظاهر شود */ | |||
.product-image-box:hover .image-two { | .product-image-box:hover .image-two { | ||
opacity: 1; | opacity: 1; | ||
transform: none !important; | |||
transform: | |||
} | } | ||
} | } | ||
/* ========================================= | /* ========================================= | ||
نسخهٔ ۱۶ اوت ۲۰۲۶، ساعت ۰۸:۴۶
