Как реализовать такой hover?

Question

[angry_yum]

Как реализовать такой вот hover эффект?
Смена картинки не нужно, именно выдвигающийся блок, с кнопкой.

Answer 1

[Максим]

Здравствуйте!
Можно создать 2 элемента (1 на который будут наводится (1), другой , который будет появляться (2)). И прописать второму элементу(2) display: noneИ при наведении на первый элемент (1) будем изменять display на block
То есть примерно это будет смотреться так:

#1:hover #2 {
   display: block
}

Но желательно это сделать на jQuery, чтобы хоть какая-то анимация была.
Но если она должна не появляться, а просто делать такой эффект, то просто добавляем тень, меняем высоту. А с текстом, создаем <p id="top">Lorem</p>, делаем

#top {
    display: none
}

. По такому же принципу делаем кнопки снизу

Answer 2

[Юрий Янин]

Добавь блоку с текстом и ценой абсолютное позиционирование и прибей к полу. Блок с кнопкой должен находится внутри блока с текстом после цены и иметь высоту 0. При наведении увеличивай высоту блока с кнопкой.

Answer 3

[ljutaev]

Привет) можно и на чистом css.
родительскому блоку position: relative; overflow: hidden.
блоку с кнопкой position: absolute; bottom: 0; transform: translateY(высота кнопки^px); transition: transform .5s;
при ховере на родительский блок блоку с кнопкой задавать transform: translateY(0);
также можно поигратся с появлением кнопки типа чтоб она инертно подъежала, вписать какой нибуть красивый easing )