<div class="radikalwp-card-team"><img class="radikalwp-card-team-img" src="https://placehold.co/400x460/e0e7ff/4f46e5?text=Photo" alt="عکس همکار"><div class="radikalwp-card-team-overlay"><h3 class="radikalwp-card-team-name">امیر رضایی<//h3><p class="radikalwp-card-team-role">توسعهدهنده ارشد فرانتاند<//p><//div><//div>
.radikalwp-card-team {
position: relative;
width: 260px;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
}
.radikalwp-card-team-img {
display: block;
width: 100%;
height: 300px;
object-fit: cover;
transition: transform .5s ease;
}
.radikalwp-card-team:hover .radikalwp-card-team-img { transform: scale(1.06); }
.radikalwp-card-team-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 44px 20px 18px;
background: linear-gradient(to top, rgba(15, 23, 42, .88), transparent);
transition: padding .35s ease;
}
.radikalwp-card-team:hover .radikalwp-card-team-overlay { padding-bottom: 24px; }
.radikalwp-card-team-name {
margin: 0 0 4px;
font-size: 16px;
font-weight: 800;
color: #fff;
}
.radikalwp-card-team-role {
margin: 0;
font-size: 12px;
color: #cbd5e1;
}
درباره این اسنیپت
کارت معرفی عضو تیم با تصویر تمامعرض و اورلی گرادیانی تیره که نام و نقش روی آن خوانا میماند. در هاور، اورلی کمی تیرهتر و اطلاعات به بالا کشیده میشوند تا حس زنده بودن منتقل شود. برای صفحات درباره ما، معرفی سخنرانان و اسلایدر تیم مناسب است. تصویر با object-fit:cover در هر نسبتی قشنگ میماند.
پرسشهای متداول
مقدار src تصویر را با آدرس عکس واقعی عضو تیم جایگزین کنید. ارتفاع 300px را میتوانید متناسب با عکسهایتان تغییر دهید.
شدت اورلی را در گرادیان (عدد .88) به .95 برسانید یا گرادیان را به کل ارتفاع تصویر گسترش دهید تا کنتراست متن تضمین شود.
بله؛ یک ردیف آیکون داخل اورلی بگذارید و با max-height و opacity در هاور بازش کنید تا در حالت عادی مخفی بماند.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۵ از ۱۲ رأی — برای امتیازدهی وارد شوید
شاید بپسندی
سارا محمدی
طراح تجربه کاربری
کارت پروفایل هولوگرافیک
سارا محمدی
طراح تجربه کاربری و علاقهمند به رابطهای تمیز و مینیمال.
کارت پروفایل شناور
دفتر مرکزی
تهران، خیابان آزادی، پلاک ۱۲۰
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!