SM - Стильные решения для вашего сайта

Hover Card: эффектный дизайн с плавной заливкой на CSS

Эффект плавной заливки карточки при наведении на CSS


Хотите добавить стильный и интерактивный элемент на свой сайт? Эффектная плавная заливка карточки при наведении курсора — это идеальный способ привлечь внимание пользователей и улучшить пользовательский опыт.

В данном примере демонстрируется, как создать карточку, которая меняет цвет фона с эффектом плавной заливки при наведении. Реализация полностью выполнена на чистом CSS, что обеспечивает быструю загрузку и отсутствие лишнего кода.

Этот эффект подойдет для создания карточек товаров, галерей изображений, меню или любых других интерактивных элементов. Приятная анимация добавляет профессионализма вашему проекту, делая его современным и запоминающимся.

Создайте динамичный веб-дизайн, который подчеркнет вашу креативность и выделит сайт среди конкурентов!

See the Pen hover card by ucefdarkness (@ucefdarkness) on CodePen.

        
HTML
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>card</title>
 
 
<!-- custom css file -->
 
<link rel="stylesheet" href="./css.css">
</head>
<body>
<header class="header_area">
</header>
<main class="site-main">
 
 
        <form class="box">
            <div class="al"></div>
<div class="container">
  <div class="duck">01</div>
  <h1>Product</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et repellendus dolorem enim debitis vel incidunt quo fugiat tempore perspiciatis, sint fuga voluptatibus alias, nisi nulla laborum excepturi voluptatum tempora consequuntur.</p>
</div>
          </form>
</body>
</html>
        
CSS
:root {
    --primaryC: #fed330;
}
 
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #222222;
}
.container {
    width: 400px;
    margin: 20px auto;
    box-shadow: 0 0 10px var(--primaryC);
    padding: 30px;
    text-align: center;
    overflow: hidden;
    border-radius: 10px;
    
}
.container .duck {
    background-color: var(--primaryC);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 26px;
    transition: 0.6s;
}
 
.container h1 {
     margin: 15px 0;
     font-size: 24px;
     transition: 0.6s;
     color: #fff;
}
 
.container p {
    line-height: 1.6;
    font-size: 18px;
    transition: 0.6s;
    color:#fff;
}
.container:hover .duck{
    box-shadow: 0 0 0 500px var(--primaryC);
}
.container:hover .duck,
.container:hover p,
.container:hover h1{
    color: #222222;
}

hover-card.zip
0 5.92 Kb
Нашли ошибку? Сообщите нам, мы исправим!
0 лайков 0 просмотров
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!

Сайт SATAMAX.RU