اسکرینشاتهای پروژه
هاور پدیدارشدن لایه دوم
هاور
پشته
لایه
۸۰
۴.۵ (۱۲)
<div class="radikalwp-hover-overlay"><img src="/uploads/demo2.svg" alt="پروژه" class="radikalwp-hover-overlay-img"><div class="radikalwp-hover-overlay-cap"><b>پروژه فروشگاهی<//b><span>طراحی و توسعه کامل<//span><//div><//div>
.radikalwp-hover-overlay { position: relative; width: 260px; height: 170px; border-radius: 16px; overflow: hidden; }
.radikalwp-hover-overlay-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.radikalwp-hover-overlay-cap {
position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; color: #fff;
background: linear-gradient(0deg, rgba(15,23,42,.85), transparent);
transform: translateY(30%); opacity: 0; transition: transform .4s, opacity .4s;
}
.radikalwp-hover-overlay-cap b { display: block; font-size: 14px; margin-bottom: 2px; }
.radikalwp-hover-overlay-cap span { font-size: 11px; opacity: .8; }
.radikalwp-hover-overlay:hover .radikalwp-hover-overlay-cap { transform: translateY(0); opacity: 1; }
.radikalwp-hover-overlay:hover .radikalwp-hover-overlay-img { transform: scale(1.06); }
روی تصویر یک لایه تیره با متن از پایین بالا میآید؛ الگوی نمونهکار (portfolio) که عنوان و لینک را در هاور نشان میدهد.
میانگین امتیاز کاربران: ۴.۳ از ۱۲ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!