Верстаем карточку с эффектом раскрывающейся шторки при наведении на CSS
Доброго времени суток! В данном примере мы рассмотрим пример карточки, которая показывает свое содержимое
при наведении указателя на нее. При этом будет использоваться эффект раскрывающейся шторки.
Код примера:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Curtain Card</title>
<style>
body {
background: #f2f2f2;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 400px;
width: 600px;
background: #f2f2f2;
overflow: hidden;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 0 20px 8px #d0d0d0;
}
.content {
position: absolute;
top: 50%;
transform: translatey(-50%);
text-align: justify;
color: black;
padding: 40px;
}
h1 {
font-weight: 900;
text-align: center;
}
h3 {
font-weight: 300;
}
.flap {
width: 100%;
height: 100%;
}
.flap::before {
position: absolute;
content: "";
height: 100%;
width: 50%;
background: url("https://myrusakov.ru/images/articles/javascript-debounce.jpg") white;
background-position: 100px;
background-repeat: no-repeat;
transition: 1s;
}
.flap::after {
position: absolute;
content: "";
height: 100%;
width: 50%;
right: 0;
background: url("https://myrusakov.ru/images/articles/javascript-debounce.jpg") white;
background-position: -200px;
background-repeat: no-repeat;
transition: 1s;
}
.container:hover .flap::after {
transform: translatex(300px);
}
.container:hover .flap::before {
transform: translatex(-300px);
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>Заголовок</h1>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem corrupti officia,
eveniet accusantium distinctio aspernatur. Aliquid, enim non! Maxime enim placeat ut
hic fugit magni consequatur, quo adipisci id obcaecati?
</h3>
</div>
<div class="flap"></div>
</div>
</body>
</html>
Таким образом, при наведении указателя на карточку, шторки отодвинутся и будет отображено внутреннее содержимое карточки.
