Задать вопрос
@voland700
css

Как на css сделать в карточке товара появление блока кнопок при наведении курсора?

Пытаюсь сделать список товаров каталога. Необходимо добиться плавного появления блока кнопок при наведении курсора, примерно как на изображении.
68ff5cab01f08812960430.jpeg
Необходимо, чтобы при наведении, плавно появлялся блок с кнопками, при этом сама карточка товара увеличивалась по высоте, и была над потоком.

HTML 'элемента

<div class="card">
        <div class="card_inner">
            <div class="card_img_wrap">
                <a href="#" class="card_img_link">
                    <img src="/images/src/products/everest_12.jpg" alt="product image" class="card_img">
                </a>
            </div>
            <h3 class="card_title">
                <a href="#" class="card_title_link">Печь-камин EVEREST F12</a>
            </h3>
            <div class="card_price_block">
                <div class="card_price_wrap">
                    <span class="card_price">77990 <span class="card_currency">руб</span></span>
                    <span class="card_price_old">79990 руб</span>
                </div>
            </div>
            <form class="card_bottom" action="#">
                <button type="submit" class="card_btn">В корзину</button>
                <div class="card_counter_wrap">
                    <span class="card_counter__btn" data-direction="minus">-</span>
                    <input type="number" name="quantity" value="1" size="5" class="card_counter__value">
                    <span class="card_counter__btn" data-direction="plus">+</span>
                </div>
            </form>
        </div>
    </div>



Прошу помощи. Буду признателен за любой совет.
  • Вопрос задан
  • 68 просмотров
8 комментариев
Подписаться 1 Простой 8 комментариев
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 1
@Gromov21
Проще всего сделать через max-height и opacity. Смысл такой - скрываешь блок с кнопками, а при наведении на .card делаешь ему плавное появление. Вот пример:
.card {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 15px;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,.1);
  z-index: 10;
}

.card_bottom {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.card:hover .card_bottom {
  max-height: 120px; /* чуть больше, чем высота блока */
  opacity: 1;
  pointer-events: auto;
}

.card_btn {
  padding: 10px 15px;
  border-radius: 6px;
  background: #ffd500;
  border: none;
  cursor: pointer;
}

За счёт max-height карточка сама увеличивается по высоте, а opacity делает появление мягким. Главное - поставить overflow: hidden, чтобы ничего не вылазило при сворачивании.
Если хочешь чуть возвышение над остальными при ховере - добавь z-index и лёгкий transform: translateY(-2px);.
Так получается почти как на твоей картинке - кнопки плавно выезжают, карточка чуть поднимается.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
ITK academy • Нижний Новгород
от 50 000 до 90 000 ₽
PHP-разработчик
Prosox
До 1 200 $
Специалист технической поддержки (чат)
WebSoft
от 50 000 до 70 000 ₽
Ещё вакансии