Как сделать такую карточку (обновлено)?

Question

[Сергей]

Как сделать так, чтобы скрытое содержимое, отображаемое при наведении на карточку товара, визуально было одним целым с данной карточкой?
Пример 1.
Пример 2.
Решение должно быть максимально гибким:

1. У карточки не должно быть фиксированной высоты, как в примере 1.
   
2. Карточка имеет тень, поэтому следует уделить внимание тому, чтобы дополнительный контент соединялся с основным бесшовно.
   

Вот как получилось у меня (использовал пример 2), но тут при наведении в месте соприкосновения теней виден шов.

Comments

[uRoot]

Используйте:

.какой-то класс{
display: none;
}
.какой-то класс:hover {
display: block;
}

Или же можно использовать
visibility: hidden; а при наведении visibility: visible;

[Сергей]

Что непонятного, я же привёл 2 сайта в качестве примеров. При наведении на товар должно появляться скрытое содержимое, которое: а) не должно влиять на соседние карточки; б) визуально должно быть частью карточки, то есть иметь с ней бесшовное соединение. Главная загвоздка в том, что карточка с тенью и не получается сделать бесшовную структуру.

Answer 1

[Berkutman]

:hover наше все. htmlbook.ru/CSS/hover

Comments

[Сергей]

Обновил вопрос.

Answer 2

[Мария Коробкоголовых]

Немного подумала и вроде решила твою задачу:
решение

Comments

[Сергей]

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

[Мария Коробкоголовых]

Сергей, а можно скриншот макета? Не очень понимаю, что должно в конце получиться. Высота фиксированная только у родительского блока, в hidden можно любое кол-во контента вбить



У родительских блоков тоже будет разная высота?

[Сергей]

Мария Коробкоголовых, смотрите примеры, которые я скинул. Визуально надо такие же карточки товара, но с более гибкой реализацией (без указания высоты карточки и чтобы она выглядела целостной).

[Мария Коробкоголовых]

Судя по твоему профилю, ты разбираешься в js. Если нужна максимальная гибкость, придется к нему прибегнуть. Во-первых, чтобы красиво расположить плашки разных размеров



Допустим, ты будешь использовать такой плагин. На выходе у каждой плашки будет некая высота в пикселях, уже ко всему этому делу нужно будет применять верстку, которую я предлагала выше (может с некоторыми изменениями)