پیشنمایش زنده (iframe sandbox)
تمامصفحه
<div class="radikalwp-reveal-hover"><div class="radikalwp-reveal-hover-bg"><//div><div class="radikalwp-reveal-hover-veil"><button type="button" class="radikalwp-reveal-hover-btn">مشاهده محصول<//button><//div><//div>
.radikalwp-reveal-hover {
position: relative;
width: 280px;
height: 180px;
overflow: hidden;
border-radius: 16px;
}
.radikalwp-reveal-hover-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #10b981, #0ea5e9);
transition: transform .4s ease;
}
.radikalwp-reveal-hover-veil {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, .5);
opacity: 0;
transition: opacity .35s ease;
}
.radikalwp-reveal-hover-btn {
padding: 11px 30px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
color: #0f172a;
background: #fff;
border: none;
border-radius: 12px;
cursor: pointer;
opacity: 0;
transform: translateY(10px);
transition: opacity .35s ease, transform .35s ease;
}
.radikalwp-reveal-hover:hover .radikalwp-reveal-hover-veil { opacity: 1; }
.radikalwp-reveal-hover:hover .radikalwp-reveal-hover-btn {
opacity: 1;
transform: translateY(0);
}
درباره این اسنیپت
با هاور، سطح تصویر تیره میشود و دکمه اقدام از حالت نامرئی با کمی جابهجایی ظاهر میگردد. کاربر بدون رفتن به صفحه دیگر، مستقیم به اقدام اصلی میرسد. برای کارت محصول، پیشنمایش ویدیو و کارت دانلود مناسب است. ترنزیشن ترکیبی opacity و transform حرکت را طبیعی و نرم میکند.
پرسشهای متداول
تگ button را با a و آدرس مقصد جایگزین کنید. استایل کلاس روی لینک هم یکسان اعمال میشود.
بله؛ بهجای متن دکمه، آیکون پخش بگذارید تا حس پیشنمایش ویدیویی بدهد و لایه تیره نقش قاب را بازی کند.
شفافیت رنگ rgba روی لایه veil را کاهش دهید تا تصویر بیشتر دیده شود و دکمه همچنان خوانا بماند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۷ از ۷ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!