Как обрезать все элементы выходящие за блок снизу, но не обрезать выходящие сверху?

Question

[Артем Рассадин]

Необходимо реализовать следующее:



Провод должен обрезаться снизу, но не обрезаться при выходе за круг сверху. Как это сделать?

Comments

[Максим]

Вы весь макет можете показать?

[Артем Рассадин]

Максим с Казахстана,

[Вадим]

Артем Рассадин,
1. Почему Вы решили, что тут что-то обрезается?
2. Даже если и так, что должно происходить с интерфейсом, когда изображение по высоте окажется слишком большое? Всё должно сместиться вниз? Изображение должно быть поверх вышестоящего контента? Ну и так далее.

[Артем Рассадин]

Извините, ошибся. скинул не макет. вот макет:
При наведении кабель вылезает из круга

[Сергей Сергей]

:before → img → container

Кто-нибудь, расшифруйте.

[Максим]

Артем Рассадин, можно анимировать svg mask ... там просто при css наведении или mousemove/mouseover сменить цвет в svg маске

[Максим]

Артем Рассадин, либо присто сместить кусок кабеля с задержкой анимации

[Вадим]

Артем Рассадин, давайте наглядно,
как при состоянии покоя, как при наведении?
Потому что сейчас на последнем приложенном скрине у Вас первая карточка судя по всему с эффектом наведения, но кабель выглядит как и на остальных.
Чётко приложите 2 скрина рядом. Как должно быть по умолчанию, как при наведении.

[Артем Рассадин]

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

[Максим]

Артем Рассадин, тогда ещё проще, обычный div внутри img(ваш кабель) и просто сместите при нааедении на родительский блок img

[Артем Рассадин]

Максим с Казахстана, окей, но картинка то прямоугольная. Мне надо снизу ее обрезать, а с верху когда она выходит за кабель не обрезать. возможно не правильно понял, если есть возможность объясните подробнее пожалуйста

[Максим]

Артем Рассадин, обрежьте полность её, пускай картинка будет квадратной но она будет прозрачной

Answer 1

[RAX7]

Comments

[Артем Рассадин]

Спасибо огромное!

Answer 2

[Сергей Сергей]

Comments

[Артем Рассадин]

Спасибо огромное!