Сегодня в этом блоге вы узнаете, как создать адаптивную карточку CSS с анимацией при наведении только на HTML и CSS. Карточка представляет собой небольшой прямоугольный модуль с изображениями и текстом. Чтобы сбалансировать удобство использования интерфейса, дизайн пользовательского интерфейса карты является выбором по умолчанию. Поскольку карточки просты в использовании, они также могут отображать содержимое, содержащее различные сведения.
Как вы можете видеть на изображении, это карточки профиля, основанные только на HTML и CSS. Во-первых, эти карты на начальном этапе, когда содержимое карт скрыто и отображаются только изображения, но при наведении курсора на конкретную карту содержимое карты плавно сползает вниз и показывается.
Пример:
Apps Developer
Website Developer
Думаю, это поможет новичкам понять код создания карты. Если у вас есть базовые знания HTML и CSS, вы можете использовать эти карты на своем веб-сайте и в проектах после изменения некоторых строк кода.
Если вам нравится эта программа (Отзывчивый дизайн карточек CSS с анимацией при наведении курсора) и вы хотите получить исходные коды. Вы можете легко получить исходные коды этой программы. Чтобы получить исходные коды, вам просто нужно прокрутить вниз.
Отзывчивая карточка CSS с анимацией при наведении [исходные коды]
Для создания этой программы (отзывчивый дизайн карточек CSS с анимацией при наведении). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Сначала создайте файл HTML с именем index.html и вставьте данные коды в свой файл HTML. Помните, что вы должны создать файл с расширением .html.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Profile UI Card Design | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="card">
<div class="img">
<img src="#">
</div>
<div class="top-text">
<div class="name">
Annie Lea
</div>
<p>
Apps Developer
</p>
</div>
<div class="bottom-text">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div class="btn">
<a href="#">Read more</a>
</div>
</div>
</div>
<div class="card">
<div class="img">
<img src="#">
</div>
<div class="top-text">
<div class="name">
Eliana Maia
</div>
<p>
Website Developer
</p>
</div>
<div class="bottom-text">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div class="btn">
<a href="#">Read more</a>
</div>
</div>
</div>
<div class="card">
<div class="img">
<img src="#">
</div>
<div class="top-text">
<div class="name">
Harley Briana
</div>
<p>
Graphic Developer
</p>
</div>
<div class="bottom-text">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div class="btn">
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>
Во-вторых, создайте файл CSS с именем style.css и вставьте данные коды в свой файл CSS. Помните, что вы должны создать файл с расширением .css.
CSS КОД:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
height: 100%;
display: grid;
place-items: center;
background: #f2f2f2;
text-align: center;
}
.container{
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.card{
height: 280px;
max-width: 350px;
margin: 0 20px;
background: white;
transition: 0.4s;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.card:hover{
height: 470px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.card .img{
height: 200px;
width: 100%;
}
.card .img img{
height: 100%;
width: 100%;
object-fit: cover;
}
.card .top-text{
padding: 5px;
}
.card .top-text .name{
font-size: 25px;
font-weight: 600;
color: #202020;
}
.card .top-text p{
font-size: 20px;
font-weight: 600;
color: #e74c3c;
line-height: 20px;
}
.card .bottom-text{
padding: 0 20px 10px 20px;
margin-top: 5px;
background: white;
opacity: 0;
visibility: hidden;
transition: 0.1s;
}
.card:hover .bottom-text{
opacity: 1;
visibility: visible;
}
.card .bottom-text .text{
text-align: justify;
}
.card .bottom-text .btn{
margin: 10px 0;
text-align: left;
}
.card .bottom-text .btn a{
text-decoration: none;
background: #e74c3c;
color: #f2f2f2;
padding: 5px 8px;
border-radius: 3px;
display: inline-flex;
transition: 0.2s;
}
.card .bottom-text .btn a:hover{
transform: scale(0.9);
}
@media screen and (max-width: 978px) {
.container{
flex-wrap: wrap;
flex-direction: column;
}
.card{
max-width: 700px;
margin: 20px 0;
}
}
Вот и все, теперь вы успешно создали адаптивный дизайн карточек CSS с анимацией при наведении курсора в HTML и CSS.