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

Question

[ferles22]

https://test3.joki-joya.ru/parks/1/prices/
Подскажите пожалуйста, как сделать такой эффект, как при наведении на плитку

Answer 1

[Никита Егоров]

Два изображения. Оба с position: asolute. Вот пример - https://jsfiddle.net/Svupol/j2aqvec6/6/

Одно ровно по центру->

positon: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Другое ниже на 100% ->

position: absolute;
left: 50%;
top: 150%;
transform: translate(-50%, -50%);

При ховере у второго top: 50%, а у первого top: -50%

Comments

[ferles22]

А на примере можете показать? Все равно не догнал немного

[Никита Егоров]

ferles22, обновил ответ - https://jsfiddle.net/Svupol/j2aqvec6/6/

Answer 2

[Ivan Bogachev]

1. Блок с overflow: hidden, содержимое в 200% его высоты.
2. При наведении содержимому добавляется transform: translateY(-100%).

Answer 3

[Мария]

Пример со смещением и сменой заливки https://codepen.io/lonsaria/pen/djaaOd

1. Родительский блок overflow: hidden; position: relative;
2. Блоки внутри position: absolute;
2.1. Блоки занимают всю доступную высоту и ширину родительского блока height: 100%; width: 100%;.
2.2. Один отображается по-умолчанию top: 0;
2.3. Другой скрыт из видимой области top: 100%;
3. При наведении блоки смещаются вверх. Первый top: -100%; Второй top: 0;