<div class="radikalwp-hv-color"><div class="radikalwp-hv-color-img" style="background:linear-gradient(135deg,#fbbf24,#f43f5e,#8b5cf6)"><//div><//div>
.radikalwp-hv-color { width: 220px; height: 145px; border-radius: 16px; overflow: hidden; cursor: pointer; }
.radikalwp-hv-color-img {
width: 100%;
height: 100%;
filter: grayscale(1) contrast(.9);
transform: scale(1.02);
transition: filter .5s ease, transform .5s ease;
}
.radikalwp-hv-color:hover .radikalwp-hv-color-img { filter: grayscale(0) contrast(1); transform: scale(1.08); }
درباره این اسنیپت
تصویر با فیلتر خاکستری شروع میشود و در هاور رنگی و پرجان میشود؛ کلاسیک پورتفولیوهای عکاسی. توجه را به آیتم فعال هدایت میکند. این هاور برای تصاویر گالری، نمونهکار و کارتهای بلاگ طراحی شده و بازخورد لمسی قوی میدهد. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۸ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!