CSS-карточки являются полезным элементом современного веб-дизайна. С помощью этой карточки любая информация, услуга или продукт могут быть представлены посетителям визуально привлекательным образом.
CSS-карточки также известны как карточки контента. Она делает веб-элементы, такие как заголовки, изображения, текст и кнопки, визуально привлекательными. Сегодня мы создадим несколько адаптивных CSS-карточек или наложений при наведении курсора мыши на изображение, информация, связанная с изображением, такая как заголовок, текст и кнопки с призывом к действию, видны при наведении курсора мыши. В сочетании с цветом фона мы использовали градиентный цвет для наложения. Посмотрите следующее обучающее видео, чтобы увидеть, как сделать карточки в деталях.
Использование CSS-карточек - один из самых популярных способов отображения информации. Эти карточки удобны, потому что их легко понять и модифицировать. Эти карты могут вписаться в экран любого размера, потому что они адаптивны по своей природе. В нашем фрагменте у нас есть три отдельных раздела внутри контейнера div, называемого "box-area".
К каждой из них добавлено изображение и информация о наложении. Во-первых, контейнер дочернего div выравнивается по вертикали в соответствии со свойством CSS Display Grid. В каждом поле есть элемент наложения высотой 0 и градиент фона, который меняется от прозрачного до цвета #1c1c1c. По умолчанию это наложение будет скрыто, но при наведении курсора мыши изображение увеличится, и наложение расширится, чтобы покрыть все поле, открывая заголовок, текст и кнопку призыва к действию.
Исходный код
Чтобы создать эту адаптивную анимацию наложения CSS-карточек, вы должны создать HTML-файл, а также файл CSS. Затем следует скопировать и вставить в ваш проект следующие коды в кодовых полях.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете скачать исходный код, нажав на кнопку скачать. Кроме того, оставляйте свои вопросы, предложения и отзывы в комментариях ниже.
<!DOCTYPE html>
<!-- divinectorweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>CSS Cards with Overlay Hover Animation/title></title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="card-area">
<div class="wrapper">
<div class="box-area">
<div class="box">
<img alt="" src="img/1.jpg">
<div class="overlay">
<h3>Mountaineering</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque modi explicabo libero ea nam. Quod.</p><a href="#">Book Now</a>
</div>
</div>
<div class="box">
<img alt="" src="img/2.jpg">
<div class="overlay">
<h3>Scuba Diving</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque modi explicabo libero ea nam. Quod.</p><a href="#">Book Now</a>
</div>
</div>
<div class="box">
<img alt="" src="img/3.jpg">
<div class="overlay">
<h3>Travel World</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque modi explicabo libero ea nam. Quod.</p><a href="#">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
body{
background: #1e1f21;
color: #fff;
}
.wrapper{
padding: 10px 10%;
}
#card-area{
padding: 50px 0;
}
.box-area{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 40px;
margin-top: 50px;
}
.box {
border-radius: 10px;
position: relative;
overflow: hidden;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
}
.box img{
width: 100%;
border-radius: 10px;
display: block;
transition: transform 0.5s;
}
.overlay {
width: 100%;
height: 0;
background: linear-gradient(transparent,#1c1c1c 58%);
border-radius: 10px;
position: absolute;
left: 0;
bottom: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
font-size: 14px;
transition: height 0.5s;
}
.overlay h3 {
font-weight: 500;
margin-bottom: 5px;
margin-top: 80%;
font-family: 'Bebas Neue', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
.overlay a {
margin-top: 10px;
color: #262626;
text-decoration: none;
font-size: 14px;
background: #fff;
border-radius: 50px;
text-align: center;
padding: 5px 15px;
}
.box:hover img{
transform: scale(1.1);
}
.box:hover .overlay{
height: 100%;
}
0 Комментарии