<div class="radikalwp-hv-shine"><div class="radikalwp-hv-shine-img" style="background:linear-gradient(135deg,#f59e0b,#ef4444)"><//div><//div>
.radikalwp-hv-shine { position: relative; width: 230px; height: 150px; border-radius: 16px; overflow: hidden; cursor: pointer; }
.radikalwp-hv-shine-img { width: 100%; height: 100%; transition: transform .45s ease; }
.radikalwp-hv-shine::after {
content: '';
position: absolute;
top: -20%;
bottom: -20%;
width: 34%;
right: -45%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
transform: skewX(-20deg);
transition: right .65s ease;
}
.radikalwp-hv-shine:hover::after { right: 125%; }
.radikalwp-hv-shine:hover .radikalwp-hv-shine-img { transform: scale(1.05); }
درباره این اسنیپت
بازتاب نور مورب که در هاور سریع از روی تصویر میگذرد؛ همان جلای محصول در فروشگاههای بزرگ. ساده، سریع و همیشه مؤثر. این هاور برای تصاویر گالری، نمونهکار و کارتهای بلاگ طراحی شده و بازخورد لمسی قوی میدهد. همه کلاسها با پیشوند radikalwp شروع میشوند تا با استایلهای قالب شما تداخلی پیش نیاید و راحتتر شخصیسازی شوند. انیمیشنها با GPU-friendly خواص transform و opacity ساخته شدهاند تا سرعت سایت شما تحت تأثیر قرار نگیرد.
پرسشهای متداول
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۹ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!