Как создать такой CSS эффект при наведении на блок?

Question

[Владимир]

Как создать такой эффект при наведении на блок с помощью css, очень интересно, спасибо)

Comments

[Николай Лапшин]

Можно подробней, что за эффект?

[Владимир]

Николай Лапшин: Честно говоря сам незнаю что за эффект, хочу к себе на сайт прикрутить но не могу найти что это и как делается))

[Владимир]

Николай Лапшин: Эффект при наведении на блок тот что с кнопкой в корзину, он получается идет поверх остальных блоков

[Николай Лапшин]

Я просто по картинке не понимаю суть эффекта. Что должно происходить?

Answer 1

[Андрей Tantalid]

donsan4o в основном прав. Пример реализаци: https://jsfiddle.net/2s30zd16/2/

Answer 2

[xmoonlight]

https://jsfiddle.net/rwyk5pkr/4/

Answer 3

[Сергей]

А посмотреть исходник нельзя? Это стандартный шаблон битрикса.
Вообще просто display:none; при наведении display:block

Comments

[Владимир]

Как это реализовать что бы это было поверх других блоков и остальные блоки не ехали?

[Сергей]

Владимир: position:absolute можно

Answer 4

[Александр]

https://jsfiddle.net/pjr4jg9p/1/

Comments

[xmoonlight]

Бордер кривоват при hover...

[Александр]

xmoonlight: Спасибо, Кэп. Это пример.

Answer 5

[donsan4o]

блок находится на position relative, всплывающий блок на абсолюте и спозиционирован относительно родителя. Изначально visibility: hidden, opacity: 0. При ховере visibility: visible, opacity: 1. И еще можно поиграться с transition для родителя. Будет эффект затухания...

Answer 6

[Антон Федорян]

так например https://jsfiddle.net/slippyk/mvmbenx1/

Comments

[DTX]

Остальные блоки поплывут

[Владимир]

DTX: Да все верно, но этого быть не должно)

[Владимир]

Как вот здесь посмотрите 1068lab.bitrixlabs.ru/catalog/t-shirts

Answer 7

[Михаил Чирский]

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

Comments

[Владимир]

1068lab.bitrixlabs.ru/catalog/t-shirts

Answer 8

[Владимир]

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

Comments

[Tash1moto]

вот так https://jsfiddle.net/rwyk5pkr/

[Владимир]

Tash1moto: Когда border, то не прокатывает вот ... https://jsfiddle.net/rwyk5pkr/1/

[xmoonlight]

Tash1moto: Супер! Это 100% решение -> Добавьте отдельным ответом.

Answer 9

[Tash1moto]

вот так это сделано, по нормальному. https://jsfiddle.net/2s30zd16/1/

Comments

[donsan4o]

это не нормльно!(( все элементы прыгают и скачут, это очень плохо

[Tash1moto]

Вы каким браузером пользуетесь? https://i.gyazo.com/4ff6d90b5b632b5a8a31b7059ca1b1...