Как грамотно спозиционнировать картинку подобным образом?

Question

[aidarDev]

Всем привет, столкнулся с проблемой, туплю сильно, не могу правильно спозиционнировать картинку как на скриншоте:
вот как у меня получается - https://codepen.io/chaserof/pen/GRgZzag
надо что бы картинка немного вылазила за пределы блока, как на скриншоте. + ещё проблема в том, что эта картинка не должна быть фоном класса section__form, а должна быть в блоке col-md-3, что бы с увеличением размера экрана, картинка не прижималась к левому краю экрана, а была рядом с col-md-9, в центре. вот кодпен с 2 версией - https://codepen.io/chaserof/pen/xxbVBwM Надо что бы картинка вылазила за границы блока, и ещё проблема, цвет картинки серый, потому что не могу наложить поверх неё заливку. А в 1 версии цвет картинки как надо.
Короче просто хочу сделать как на скриноште)
Помогите пожалуйста, 3 часа парюсь над этим

Answer 1

[Капитан Какао]

Вот так - смотреть демо

Comments

[aidarDev]

осталось только сделать синюю заливку цветом поверх картинки, у меня не получается это правильно сделать

[aidarDev]

[aidarDev]

Pardon Me! Where Do I Find 4giveness?, если человек захочет поставить другую картинку, ему придется постоянно менять цвет? мне кажется было бы более грамотным решением сделать заливку

[Анатолий Куликов]

aidarDev, сделайте в svg и через стили делайте заливку.

[RAX7]

aidarDev, в макете используется какой-то режим наложения для картинки (скорее всего overlay), в CSS для картинки можно добавить mix-blend-mode: overlay. Но так как это свойство плохо поддерживается браузерами, то лучше просто перекрасить картинку в нужный цвет.

[Капитан Какао]

Если ответ помог, не забывайте выбрать его решением)

[aidarDev]

RAX7, во, mix-blend-mode: overlay как раз то что было мне нужно, спасибо. Эх жаль что с её поддержкой проблемы. А если тупо менять цвет картинки - не смогу добиться эффекта оверлея как на макете (т.е цвет компаса в синем блоке - тёмно синий, а за пределами его цвет серый)