@kirigosh

Как сделать overflow hidden только по нижнему краю?

Здравствуйте. Хочу сделать такой эффект:
5d4f21b2a5336305605900.jpeg
Наводишь и блок и телефон поднимается выше. То есть картинка обрезается только по низу.

Рассматривал вариант сделать внутреннюю белую тень, но для этого нужно привлекать ещё один div, который встанет выше изображения, а мне этот вариант не подходит, так как должно быть задействовано только 2 объекта: серый прямоугольник div и картинка. Внутренних border только по нижнему краю не существует.

Какие могут быть варианты?

https://jsfiddle.net/xwc2hn6g/
  • Вопрос задан
  • 1141 просмотр
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Как вариант:
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Обычный overflow-y. Если надо сдвигать выше 0, то div надо делать изначально больше.
https://jsfiddle.net/bfojyt17/

Либо сдвигом bg position https://jsfiddle.net/bfojyt17/1/
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
@Lord_Dantes
overflow-x: hidden;

И толкаете телефон вниз посредством абсолюта, и при наведении выталкиваете.
Ответ написан
andrashh
@andrashh
Почему бы и да?
overflow-y:hidden; не?
Ответ написан
@webtostep
мне в этом случае отлично помог метод
overflow-y: clip;
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы