Новости

Эффект переворачивающейся карточки на CSS

Эффект переворачивающейся карточки на CSS

Доброго времени суток! В данной статье мы рассмотрим как перевернуть карточку, для отображения ее фоновой части, в которой может быть дополнительный контент.

файл index.html


<!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</title>

    <link rel="stylesheet" href="card.css">
</head>
<body>
    <div class="container">
        <div class="work-card">
            <div class="work-card__inner">
                <!-- Отображаемая часть карточки -->
                <div class="work-card__front">
                    <div class="front__text">
                        <div class="front__text-title">Работа <br />вахтой</div>
                        <div class="front__text-subtitle">Наши вакансии</div>
                    </div>
                    <div class="front__image">
                        <img src="man_1.png" alt="man 1"  class="img-fluid" />
                    </div>
                    <div class="front__hint">
                        Наведите, чтобы увидеть перечень вакансий
                    </div>
                </div>
                <!-- Фоновая часть, отображается при наведение мыши -->
                <div class="work-card__background">
                    <ul class="vacancies-list">
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                        <li><a href="#">Разнорабочий<br>г. Кировск</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

card.css


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  max-width: 992px;
  margin: 0 auto;
  padding: 15px;
}

.img-fluid {
  /* чтобы изображение не вылезало за пределы контейнера */
  max-width: 100%;
}

/**
  Open works card
 */
.work-card {
  /* background-color: transparent; */
  max-width: 50%;
  min-height: 400px;
  margin: 0 auto;
  cursor: pointer;
  /* повоаричает карту с перспективой - увеличьте время перехода с 0.6s до 10s, чтобы понять что это означает */
  perspective: 1000px;
}

.work-card__inner {
  position: relative;
  min-height: 400px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.work-card__front,
.work-card__background {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  /* скрываем тыловую часть у блоков */
  backface-visibility: hidden;
}

.work-card__front {
  background-image: url(card_bg_1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.work-card .front__text {
  background-image: none;
}

.work-card__background {
  padding: 5px 30px;
  background-image: url(card_bg_2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  /* при первоначальном отображении срываем второй блок, поворачивая его на 180 градусов тыловой частью, которая 
    благодаря свойству backface-visibility: hidden - скрыта */
  transform: rotateY(180deg);
}

.work-card__background .vacancies-list {
  list-style-type: none;
  width: 400px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media (max-width: 992px) {
  .work-card {
    max-width: 80%;
  }

  .work-card__background .vacancies-list {
    font-size: 0.8rem;
  }
}

.work-card__background .vacancies-list li {
  width: 50%;
  padding-left: 1rem;
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.work-card__background .vacancies-list li a {
  color: #fff;
}

.work-card__background .vacancies-list li a:hover {
  color: #debc0f;
}

.work-card__background .vacancies-list li::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  background-color: #e3bf0d;
  top: 1.5rem;
}

/**
* при наведении мыши - поворачиваем карточку
*/
.work-card:hover .work-card__inner {
  transform: rotateY(-180deg);
}

.front__text {
  position: absolute;
  left: 50px;
  top: 50px;
}

.front__text-title {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
}

.front__text-subtitle {
  font-weight: lighter;
  font-size: 1.125rem;
  padding-top: 8px;
}

.front__image {
  position: absolute;
  max-width: 18rem;
  right: 0;
  bottom: 0;
}

.front__image--right {
  max-width: 16rem;
}

@media (max-width: 992px) {
  .front__image {
    max-width: 12rem;
  }
  .front__image--right {
    max-width: 10rem;
  }
}

.front__hint {
  position: absolute;
  font-size: 0.85rem;
  max-width: 100px;
  left: 50px;
  bottom: 50px;
  color: gray;
}

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

Источник

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

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

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

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

Проверьте также
Close
Back to top button