Как на бутстрапе расположить товары плиткой с таким эффектом при наведении?

Question

[tityanka]

Есть макет с таким блоком товаров. На самом большом размере экрана (lg) - 5 колонок, на md и sm по 3 колонки, на xs по две колонки.
с проблемой 5 колонок я в принципе справилась)) осталась проблема ширины самих плиток. как их разместить так как на макете, чтобы они красиво влазили и не наезжали друг на друга на разных разрешениях? еще проблема - внутренний контент плитки поместила в абсолютно позиционированный контейнер, чтобы при наведении создать нужный эффект раскрытия. при этом приходится задавать конкретную высоту контейнеру, в том числе и обертке. а это приводит к тому, что на меньших разрешениях (в том же диапазоне lg) под плитками образовывается пустое пространство, которое существенно портит вид.
Помогите пожалуйста с этим справиться!!

codepen.io/tityanka/pen/oByvgQ

Comments

[Константин Алиханов]

Изображения не открываются. А вообще гнаться за кнопкой "Заказать" - это не очень хорошо со стороны UX

[Evanre]

Вы меня извините за откровенность, но Ваш код в принципе сложно назвать кодом. Это какой-то п***ц. Пытался разобраться в кодпене, но это жесть... Вам бы сперва подучиться и уже потом браться за проекты. Не гонитесь за бутстрапом, это инструмент для ускорения работы, но Вы должны пониматься как он работает, в данном примере лучше вообще обойтись без него. Научитесь правильно использовать препроцессоры, делать бесконечную вложенность - это не правильно.. Как написали выше, опускать кнопку ниже не есть правильно, обычно под таким слайдом прячут описание. А вообще, страничка простая и верстается за пол часа-час, используйте вместо анимации transition, попробуйте разные подходы, абсолют не слишком подходит для динамических элементов, раскрытые карточки могут быть разной высоты, возможно стоит использовать overflov: hidden Удачи.