2

Есть несколько карточек, они частично лежат друг на друге. Как сделать так чтобы при наведении на карточку она появлялась перед всеми карточками плавно, а не быстро?

2

1 ответ 1

5

Анимация z-index эффекта не даст. Можно использовать, например, opacity. Зависит от назначения этих блоков

.card {
  width: 200px;
  height: 100px;
  position: absolute;
}
.card.first {
  top: 0;
  left: 0;
  z-index: 2;
  background: green
}
.card.second {
  top: 50px;
  left: 100px;
  z-index: 1;
  background: blue
}
.card.second.shadow {
  z-index: 3;
  opacity: 1;
  transition: .5s
}
.cards:hover .card.second.shadow {
  opacity: 0
 }
<div class="cards">
  <div class="card first"></div>
  <div class="card second"></div>
  <div class="card second shadow"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.