Как сделать Hover эффект в каталоге товаров?

Question

[Дмитрий Борисов]

Я уже находил подобную тему Как сделать hover эффект для товара? , пытался следовать ей, но немного не получается.
Суть вопроса в том, чтобы изначально скрыть краткое описание, и при наведении на товар, оно плавно появлялось.
Пробовал применять такой вид

.woo-product-short-desc {
visibility:hidden
}

что помогает мне скрыть (но остается белое пространство пустое) возможно нужно использовать скрипт? помогите разобраться в этом

сайт Ссылка

Comments

[Алексей]

Там немного в стилях допилить, но тут же вопрос что при скрытом содержимом высота карточки будет отличная от полноценной и возможно будет нужно редизацнить их. Кусок белого фона тоже же не красиво.
Hover на элемент самой карточки надо вешать как то так

.woo-product-short-desc {
visibility:hidden
}
.woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product:hover .woo-product-short-desc {
    visibility: initial;
}

Соответственно при наведении блок с описанием появится.
PS. для примера

[Rustam Bainazarov]

visibility — не анимируемое свойство

Его нужно совместить, к примеру, с opacity.

Касательно белого пространства: как должен выглядеть блок без наведения и при наведении? По ссылке, по-моему, всё более чем понятно, что нужно сделать — и там это сделано правильно и абсолютно типично.

Только куда и применить это к вашей карточке товара с её текущим дизайном — не понятно.

[Дмитрий Борисов]

Алексей, а возможно ли теперь применить или скрыть то белое пространство, когда его не видно?

[Дмитрий Борисов]

Рустам Байназаров, без наведения достаточно избавиться от этого белого пространства, чтобы его вообще не было видно, а при наведение блок становился бы больше и с описанием

[Дмитрий Борисов]

ВСЕ, РЕШИЛ, СПАСИБО ВСЕМ!
назначил так :

.woo-product-short-desc {
visibility:hidden;
max-height:20px
}

.woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product:hover .woo-product-short-desc {
visibility: initial;
max-height:600px
}

счас еще чуть подкорректирую, чтобы смотрелось лучше, спасибо еще раз вам!

Answer 1

[Полина Емельянова]

При чем тут visibility:hidden?
Вы изначально скрываете часть описания путем назначения max-height + box-shadow или градиент на футер карточки.
НА ховер вешаете увеличение высоты и убирание градиента или тени.

Ботон подсвечиваете по каскаду на ховер по селектору ~

.parent:hover ~ .btn 
{ background-color: green;}

PS max-height - отлично анимируется