Эффект плавной заливки карточки при наведении на 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
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!