<figure class="radikalwp-hov-grayscale"><img class="radikalwp-hov-grayscale-img" src="https://placehold.co/600x400/c7d2fe/4338ca?text=Team" alt="عضو تیم"><figcaption class="radikalwp-hov-grayscale-cap">نیما — مدیر هنری<//figcaption><//figure>
.radikalwp-hov-grayscale {
margin: 0;
max-width: 280px;
}
.radikalwp-hov-grayscale-img {
display: block;
width: 100%;
height: 210px;
object-fit: cover;
border-radius: 14px;
filter: grayscale(1) contrast(.92);
transition: filter .5s ease, transform .5s ease;
}
.radikalwp-hov-grayscale:hover .radikalwp-hov-grayscale-img {
filter: grayscale(0) contrast(1);
transform: scale(1.02);
}
.radikalwp-hov-grayscale-cap {
display: block;
margin-top: 10px;
text-align: center;
font-size: 12.5px;
font-weight: 700;
color: #94a3b8;
transition: color .4s ease;
}
.radikalwp-hov-grayscale:hover .radikalwp-hov-grayscale-cap { color: #4338ca; }
درباره این اسنیپت
تصویر در حالت عادی خاکستری و کمی کمکنتراست است و در هاور، رنگ کامل و شفاف میشود؛ تمرکز بیننده را هدایت میکند و برای گالریهای شلوغ فضای یکدستی میسازد. ترنزیشن فیلتر نرم است و روی همه مرورگرهای مدرن پشتیبانی میشود. برای گالری تیم، نمونهکارها و آرشیو عکس مناسب است. کپشن زیر تصویر هم در هاور رنگ میگیرد.
پرسشهای متداول
مقدار grayscale(1) را به 0.8 کاهش دهید تا تهرنگی از رنگ اصلی بماند؛ حس حرفهایتر و کمبرخوردتر است.
بله؛ فیلتر روی GPU اجرا میشود و برای چند تصویر در صفحه مشکلی نیست؛ در گالریهای چنددهتایی از loading=lazy تصاویر استفاده کنید.
این اسنیپت تمرکزش رنگ است نه حرکت؛ زوم بزرگ حواس را از افکت رنگ پراکنده میکند. اگر هر دو را میخواهید از اسنیپت زوم تصویر الهام بگیرید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۳ از ۴ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!