Показать описание при наведении

[Denixxx]

Здравствуйте, народ.
Видел иногда в каких-то магазинах и на сайтах такую фишку.
Категория товара, список товаров в виде маленьких иконок.
Например:


Как сделать так, чтобы при наведении на иконку товара выезжало его описание, скрытое до этого между картинкой и ценой?
То есть сама карточка при наведении удлинняется за счёт добавки описания, а при отведении курсора — убирается?
Как это сделать без яваскрипта, на CSS? А может ссылка есть на пример?
Как понадобилось, так забыл где видел

 

[vytyacom]

Много способов решить такую штуку. Самый простой - на тот блок который скрывается повесить max-height: 0 и overflow: hidden;
При ховере на родительский блок у этого тега max-height: inherit.
Для просмотра ссылки Войди или Зарегистрируйся.

Только минус этого метода - анимации нет. Если высота блока с описанием фиксированная то проще сделать тогда при ховере max-height: **** (значение в пикселях)

Тут куча всяких примеров аналогичных : Для просмотра ссылки Войди или Зарегистрируйся

Вот еще примеры: Для просмотра ссылки Войди или Зарегистрируйся

 

[Denixxx]

Спасибо. А я уж начал на jQuery писать. Написал.
Но он чего-то дёргается, хотя вроде и прописал :not( :animated), не помогло.
Вот здесь:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Хз в чём дело, не разобрался пока.
А что резко дергается можно транзишен добавить, это не проблема.
Проблема — что нижняя сетка айтемов смещается при ховере.
Пойду-ка спать, утро вечера мудреней.

 

[vytyacom]

Я немного свой Для просмотра ссылки Войди или Зарегистрируйся. Да, с транзишоном лучше. Только анимация будет работать при конкретной величине макс-хейта (при инхерите только дергаться будет). Правда есть нюанс, при указании конкретной величины, если блок описания будет больше нежели чем макс-хейт, то оно все не поместится соответственно. В таком случае надо будет менять макс-хейт. Макс-хейт: инхерит бы решил эту проблему, но нет транзишона.
В общем тут надо подумать как оно будет в дальнейшем.

 

[Denixxx]

Я немного свой Для просмотра ссылки Войди или Зарегистрируйся. Да, с транзишоном лучше.

Утро вечера мудреней, и всё получилось.
jQuery код удалил, взял Ваш, vytyacom, за основу и доработал.
Ещё раз спасибо за подсказку, мне это решение в голову не приходило и не знал где подсмотреть.
От транзишена пришлось отказаться.
Пришлось при наведении на товар изменить position контейнера на absolute, чтобы не дёргались соседние товары при изменении размера.
А при убирании фокуса — возвращать position на relative. Чтобы контейнер при absolute не разъезжался, пришлось ему также задать фиксированную ширину.
При использовании транзишена все манипуляции браузера становятся слишком заметны, потому от него отказался.
Вот конечный вариант, если интересно: Для просмотра ссылки Войди или Зарегистрируйся
Максимальную высоту ограничивать нельзя, т.к. мы не знаем, чего там и сколько администратор в описание товара напихает

 

[vytyacom]

Я немного подредактировал твой вариант.
Для просмотра ссылки Войди или Зарегистрируйся
Ну может уже конечно перебор.
Но мне кажется абсолютом сам блок item не стоит указывать ибо тогда под него соседние залазят. Лучше item пусть будет релативом. А внутри уже некий inner блок пусть абсолютом. Тогда при ховере item будет занимать свое место, а с иннером уже можно делать что хочешь.
Ну и добавил враппер.
Там правда конструкция несколько такая дикая. Понаплодил дивов, но с 1го раза чтото лучше не придумал.

 

[Denixxx]

Прикольно конечно, но действительно перебор — к тому же нельзя задавать разные классы для объектов.
Так как неизвестно, сколько товаров будет в ряду — список объектов формируется скриптом автоматически.
К тому же смена position на absolute меня ничуть не заботит — это работает под всеми браузерами и к тому же при смене фокуса возвращается назад.

 

[vlasenkov]

Я немного подредактировал твой вариант.
Для просмотра ссылки Войди или Зарегистрируйся
Ну может уже конечно перебор.
Но мне кажется абсолютом сам блок item не стоит указывать ибо тогда под него соседние залазят. Лучше item пусть будет релативом. А внутри уже некий inner блок пусть абсолютом. Тогда при ховере item будет занимать свое место, а с иннером уже можно делать что хочешь.
Ну и добавил враппер.
Там правда конструкция несколько такая дикая. Понаплодил дивов, но с 1го раза чтото лучше не придумал.

Добавьте несколько item'ов и увидите как все скачет.

 

[GigabiT]

Прикольно конечно, но действительно перебор — к тому же нельзя задавать разные классы для объектов.

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