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

Question

[kirigosh]

Здравствуйте. Хочу сделать такой эффект:

Наводишь и блок и телефон поднимается выше. То есть картинка обрезается только по низу.

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

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

https://jsfiddle.net/xwc2hn6g/

Comments

[Виталий Першин]

Было бы не плохо, если бы вы предоставили заготовку для работы на codepen, не у всех есть желание делать всю работу за вас

Answer 1

[Сергей delphinpro]

Как вариант:

Answer 2

[Ankhena]

Обычный overflow-y. Если надо сдвигать выше 0, то div надо делать изначально больше.
https://jsfiddle.net/bfojyt17/

Либо сдвигом bg position https://jsfiddle.net/bfojyt17/1/

Comments

[kirigosh]

не... у меня серый div имеет размеры. за них выходить нельзя. я именно поэтому рассматривал вариант - модифицировать изображение белой тенью.

https://jsfiddle.net/xwc2hn6g/ - править можно только css

[Ankhena]

kirigosh, значит,
либо вводите еще один блок
либо увеличиваете высоту "серого" блока (визуально ничего не изменится, потому что серый это градиент, а не фон)
либо внизу налепляете белый псевдоэлемент для скрытия лишнего (хорошо это или плохо зависит от того, что ниже)
либо (во!) картинку меняете на div с фоновой картинкой и меняете bg position

[Ankhena]

kirigosh, например, так: https://jsfiddle.net/bfojyt17/1/

[kirigosh]

1. нет
2. сверху есть блок. я не могу менять размеры...
3. хрень и костыль, но я выбрал именно этот вариант, прописав нижнему блоку border-top:70px, margin-top:-70px
4. У меня изображения через picture подключаются. там и webp, и png...

[Ankhena]

kirigosh,
к 2. если телефон у вас на что-то наползает, ничего страшного не случится если он наползет вместе с прозрачным блоком. Хорошо бы выкладывать всю задачу, а не кусками.
к 4. clip-path

Answer 3

[Lord_Dantes]

overflow-x: hidden;

И толкаете телефон вниз посредством абсолюта, и при наведении выталкиваете.

Comments

[kirigosh]

чекай коммент к другому "решению"

[Ankhena]

только -y, а не -x

[kirigosh]

ещё и по средствам абсолюта... Люди, которые читают это! НИКОГДА НЕ ТОЛКАЙТЕ ЧЕРЕЗ АБСОЛЮТ!!! Только через TRANSFORM! Движки браузеров не могу быстро отрендорить absolut, нежели transform

Answer 4

[andrash_]

overflow-y:hidden; не?

Comments

[kirigosh]

не

[andrash_]

kirigosh, задай padding top у серого блока, задав серому блоку фиксированную высоту

[kirigosh]

andrash_, но padding будет серым, а не белым. Или я не понимаю, о чем ты говоришь. Покажи jsfiddle

[andrash_]

kirigosh, нет возможности сейчас, могу посмотреть ваш сайт

[kirigosh]

https://jsfiddle.net/xwc2hn6g/ - допиши padding, где нужно

Answer 5

[webtostep]

мне в этом случае отлично помог метод
overflow-y: clip;