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

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



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

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий