Дизайн вражаючої картки члена команди за допомогою HTML та CSS

Карточка члена команди з ефектом при наведенні — елегантний спосіб представити членів вашої команди, додаючи інтерактивний елемент. Такі картки зазвичай містять фото члена команди, його ім’я, посаду та посилання на соціальні профілі. При наведенні на картку з’являється додаткова інформація або візуальні ефекти, що підвищують залучення користувачів.

Використовуючи HTML і CSS, ви можете створити привабливі картки, які є функціональними та адаптивними. Ефект при наведенні може включати такі трансформації, як масштабування, ковзання контенту або плавне з’явлення деталей, що забезпечує сучасний і динамічний досвід користувача. Такі картки ідеально підходять для розділів "Про нас" або "Наша команда" на вебсайтах.

Використовуючи тонкі анімації та креативні макети, ви можете професійно представити членів вашої команди, зберігаючи при цьому захоплюючий дизайн.
Додавання посилань на соціальні мережі робить картки ще більш корисними, дозволяючи користувачам легко зв'язуватися з членами команди.

Створіть файл index.html і вставте туди код нашого макету.

Elizabeth
Web Developer
Olivia
Web Developer
Theodore
Web Developer
James
Web Developer
  Створіть файл style.css і скопіюйте код, а потім вставте його в нашу розкладку.  ``` *{    margin: 0;    padding: 0;    box-sizing: border-box;   }      body{    display: flex;    justify-content: center;    align-items: center;    min-height: 100vh;    background-color: #4db2ec;    font-family: Arial, sans-serif;   }      .container{    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    gap: 20px;    width: 90%;    max-width: 1200px;   }      .team-card{    position: relative;    width: 100%;    background: #fff;    border-radius: 10px;    overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
 transition: transform 0.3s ease;  
}  

.team-card:hover{  
 transform: translateY(-10px);  
 background-color: #c4364efc;  
}  

.team-card img{  
 width: 100%;  
}  

.team-card .info{  
 padding: 15px;  
 text-align: center;  
}  

.team-card .info h3{  
 font-size: 1.2rem;  
 color: #333;  
 margin-bottom: 5px;  
}  

.team-card:hover .info h3, .team-card:hover .info p{  
 color: #fff;  
}  

.team-card .info p{  
 font-size: 0.9rem;  
 color: #4db2ec;  
 font-weight: 600;  
}  

.icons{  
 position: absolute;  
 top: 15px;  
 right: 15px;  
 display: flex;  
 flex-direction: column;  
 gap: 10px;  
 opacity: 0;  
 transform: translateY(-20px);  
 transition: opacity 0.3s ease, transform 2s ease;  
}  

.team-card:hover .icons{  
 opacity: 1;  
 transform: translateY(0);  
}  

.icons a{  
 width: 40px;  
 height: 40px;  
 background-color: #c4364efc;  
 color: #fff;  
 border-radius: 50%;  
 display: flex;
justify-content: center;  
 align-items: center;  
 text-decoration: none;  
 font-size: 1.2rem;  
 transition: background 0.3s ease;  
}  

.icons a:hover{  
 background-color: #fff;  
 color: #c4364efc;  
}

Карточка члена команди з ефектом при наведенні (Team Member Card with Hover Effect) додає професіоналізм і інтерактивність вашому сайту, динамічно презентуючи членів команди і одночасно покращуючи взаємодію з користувачем.

якщо вас зацікавили мої пости, будь ласка, відвідайте мій сайт

Перекладено з: Designing Stunning Team Member Card with HTML & CSS