پیشنمایش زنده (iframe sandbox)
تمامصفحه
<a class="radikalwp-hov-zoomcard" href="#"><img class="radikalwp-hov-zoomcard-img" src="https://placehold.co/600x400/e0e7ff/4f46e5?text=Project" alt="نمونه کار"><div class="radikalwp-hov-zoomcard-overlay"><h3 class="radikalwp-hov-zoomcard-title">طراحی فروشگاه مد<//h3><span class="radikalwp-hov-zoomcard-btn">مشاهده پروژه ←<//span><//div><//a>
.radikalwp-hov-zoomcard {
position: relative;
display: block;
max-width: 340px;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
}
.radikalwp-hov-zoomcard-img {
display: block;
width: 100%;
height: 230px;
object-fit: cover;
transition: transform .7s cubic-bezier(.2, .6, .2, 1);
}
.radikalwp-hov-zoomcard:hover .radikalwp-hov-zoomcard-img { transform: scale(1.09); }
.radikalwp-hov-zoomcard-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 52px 22px 20px;
background: linear-gradient(to top, rgba(15, 23, 42, .85), transparent);
transform: translateY(26px);
opacity: .4;
transition: transform .45s ease, opacity .45s ease;
}
.radikalwp-hov-zoomcard:hover .radikalwp-hov-zoomcard-overlay {
transform: translateY(0);
opacity: 1;
}
.radikalwp-hov-zoomcard-title {
margin: 0 0 10px;
font-size: 16px;
font-weight: 800;
color: #fff;
}
.radikalwp-hov-zoomcard-btn {
font-size: 12px;
font-weight: 700;
color: #a5b4fc;
}
درباره این اسنیپت
کارت گالری که در هاور، تصویر بهنرمی زوم میشود و لایه تیرهای با عنوان و دکمه مشاهده از پایین بالا میآید. الگوی کلاسیک پرتفولیو که توجه را از تصویر به اقدام هدایت میکند. تصویر با object-fit:cover در هر ابعادی قشنگ میماند و زوم با scale و ترنزیشن کند اجرا میشود. برای نمونهکار، گالری عکس و دستهبندیهای فروشگاه عالی است.
پرسشهای متداول
بله؛ تیتر در حالت عادی هم قابل حدس است و هاور فقط آن را کامل و در جای اصلی میآورد؛ اگر کاملاً مخفی میخواهید opacity اولیه را 0 بگذارید.
مدت 0.7s ترنزیشن تصویر را تغییر دهید؛ مدتهای بلند حس سینمایی و کوتاهها حس واکنشی سریع میدهند.
سه کارت را در گرید minmax(280px, 1fr) بچینید؛ ارتفاع تصویر ثابت 230px باعث میشود ردیفها همقد بمانند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۲ از ۸ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!