الگو:کانتینر تغییر عکس: تفاوت میان نسخهها
صفحهای تازه حاوی «<html> <!-- ========================================= گالری محصولات | 3 عکس در هر ردیف بدون متن و توضیحات ========================================= --> <section class="product-gallery" aria-label="گالری تصاویر محصولات"> <div class="product-grid"> <!-- ================= کارت 1 ================= --> <div class="product-card"> <div class="product-imag...» ایجاد کرد |
بدون خلاصۀ ویرایش |
||
| (یک نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱۴: | خط ۱۴: | ||
<img | <img | ||
src="https://dl.faraghaib.ir/m/ | src="https://dl.faraghaib.ir/m/260012/260012-01-01.jpg" | ||
alt="محصول اول" | alt="محصول اول" | ||
class="product-image image-one" | class="product-image image-one" | ||
| خط ۲۱: | خط ۲۱: | ||
<img | <img | ||
src="https://dl.faraghaib.ir/m/ | src="https://dl.faraghaib.ir/m/260012/260012-01-04.jpg" | ||
alt="نمای دوم محصول اول" | alt="نمای دوم محصول اول" | ||
class="product-image image-two" | class="product-image image-two" | ||
| خط ۵۰: | خط ۵۰: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-10.jpg" | ||
alt="محصول دوم" | alt="محصول دوم" | ||
class="product-image image-one" | class="product-image image-one" | ||
| خط ۵۷: | خط ۵۷: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-07.jpg" | ||
alt="نمای دوم محصول دوم" | alt="نمای دوم محصول دوم" | ||
class="product-image image-two" | class="product-image image-two" | ||
| خط ۸۶: | خط ۸۶: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-03.jpg" | ||
alt="محصول سوم" | alt="محصول سوم" | ||
class="product-image image-one" | class="product-image image-one" | ||
| خط ۹۳: | خط ۹۳: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-08.jpg" | ||
alt="نمای دوم محصول سوم" | alt="نمای دوم محصول سوم" | ||
class="product-image image-two" | class="product-image image-two" | ||
| خط ۱۲۲: | خط ۱۲۲: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-11.png" | ||
alt="محصول چهارم" | alt="محصول چهارم" | ||
class="product-image image-one" | class="product-image image-one" | ||
| خط ۱۲۹: | خط ۱۲۹: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-12.png" | ||
alt="نمای دوم محصول چهارم" | alt="نمای دوم محصول چهارم" | ||
class="product-image image-two" | class="product-image image-two" | ||
| خط ۱۵۸: | خط ۱۵۸: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-15.png" | ||
alt="محصول پنجم" | alt="محصول پنجم" | ||
class="product-image image-one" | class="product-image image-one" | ||
| خط ۱۶۵: | خط ۱۶۵: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-16.jpg" | ||
alt="نمای دوم محصول پنجم" | alt="نمای دوم محصول پنجم" | ||
class="product-image image-two" | class="product-image image-two" | ||
| خط ۱۹۴: | خط ۱۹۴: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-13.jpg" | ||
alt="محصول ششم" | alt="محصول ششم" | ||
class="product-image image-one" | class="product-image image-one" | ||
| خط ۲۰۱: | خط ۲۰۱: | ||
<img | <img | ||
src=" | src="https://dl.faraghaib.ir/m/260012/260012-01-14.jpg" | ||
alt="نمای دوم محصول ششم" | alt="نمای دوم محصول ششم" | ||
class="product-image image-two" | class="product-image image-two" | ||
| خط ۳۲۳: | خط ۳۲۳: | ||
} | } | ||
/* ================================ | |||
/* | |||
تصاویر | تصاویر | ||
================================ */ | |||
.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: | |||
} | } | ||
} | } | ||
/* ========================================= | /* ========================================= | ||