سارا محمدی
طراح تجربه کاربری
<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 در هاور بازش کنید تا در حالت عادی مخفی بماند.
میانگین امتیاز کاربران: ۴.۵ از ۱۲ رأی — برای امتیازدهی وارد شوید
طراح تجربه کاربری
طراح تجربه کاربری و علاقهمند به رابطهای تمیز و مینیمال.
تهران، خیابان آزادی، پلاک ۱۲۰
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!