Как оформить карточку товара в каталоге?

Question

[afonin_vlad]

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

Comments

[Степан Крапивин]

свои мысли или наработки какие-то есть?

[Otrivin]

В принципе, всё это можно сделать с широкой подложкой и блоком опций с position absolute, подобранными z-index и display none; последнее свойство отменять через hover родителя

[serafims]

Логично было бы размеры в каталоге не писать, ибо эта информация очень специфична - лучше сделать фильтр по размеру. Человеку с 56 размером (или его ищущим) вряд ли будет интересно наличие 46 размера. Артикул в тексте названия - лишний мусор...

[Максим Федоров]

serafims, вроде все и верно, и в тоже время вопрос не об этом :)

[Adamos]

Это может быть оптовый каталог от производителя, где сидят закупщики - их интересует не их размер, а ассортимент.

[alex-1917]

это точно не задание?))) а может все-таки это задание? скорее задание, нежели не задание

[alex-1917]

serafims, размеры к карте товара на странице категории полезны, если нажатие на размер - это добавление в корзину. Проведи бАнальный АБ-тест!!! Если сразу нельзя добавить в корзину, то тут же 20-25% народу уходит. Если можно сразу добавить, то уходит с этой страницы не более 5-8%. Разницу чуешь или еще пожевать тебе еще??? Это не теория и не выкладки академика Суходрищева Олега Диванычева, это суровая жизнь ИМ!!!

Артикул в тексте названия - лишний мусор...

- БРЕД 10-летней давности! Это пример уникализации названий, иначе все 10000 товаров станут дублями, садись, два!!!

Answer 1

[Алексей Орлов]

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

Comments

[Otrivin]

Ну блииин, это же дублирование кода, причем неоправданное. Сеошник будет на Вас коситься.

Answer 2

[Кирилл]

elem {
    width:25%;
    height: 150px;
}
elem .more-info {
    display: none;
}
elem:hover {
    width: 30%;
    height: 200px;

}
elem:hover .more-info {
    display:block;
}

можно ещё давать обертку с position: relative и при hover давать position: absolute t0 l0

Comments

[afonin_vlad]

если использовать чисто этот CSS - то элемент при наведении вытесняет остальные. Обертка - то есть обернуть карточку в еще один блок?

[Кирилл]

afonin_vlad, да, что бы он не вытеснял остальные используйте position: absolute;

Answer 3

[alex-1917]

Автор!! Открой любой шаблон, даже в шаблонах 2014 года это уже было!!! И внезапно даже в бесплатных!!! Совсем ленивый или ЭТО ЗАДАНИЕ, А НЕ ВОПРОС??!!!
Уж про то, что тут верстки+стилей добавить 29 строк, даже упоминать не буду, это тебе не нужно, тебе нужно разжевать и ВРОТ ПОЛОЖИТЬ...

Comments

[afonin_vlad]

ты такой умный я смотрю, я же конечно не додумался сначала сам найти, потревожил такого уважаемого.. Решение я сам уже нашел, а ты и дальше строй из себя умника, который своими возмущениями пытается показать, что все умеет, а на деле похоже пустое место. Всего доброго.

[alex-1917]

afonin_vlad, мда, долго ты думал)))
ну а так-то так и есть, Я - пустое место - не скрою и не горжусь. вот такой вот я, да, так и есть.
с наилучшими пожеланиями и всего вам хорошего, и мойте руки перед едой...

[afonin_vlad]

alex-1917, та нет, думал то недолго, просто не заходил на сайт сюда. Ты знатный тролль, но пока не особо цепляет) Спасибо за заботу.

Answer 4

[Pechenki]

Еще есть вот такой модуль для отображения дополнительных картинок https://liveopencart.ru/opencart-moduli-shablony/m...