ВебмастерскаяНовостиСекреты вебмастера

Верстаем карточку с эффектом раскрывающейся шторки при наведении на CSS

Верстаем карточку с эффектом раскрывающейся шторки при наведении на 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>

Таким образом, при наведении указателя на карточку, шторки отодвинутся и будет отображено внутреннее содержимое карточки.

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button