Как реализовать такой эффект?

Question

[artemphrog]

Морда лисы находится над текстом. Как так сделать, учитывая что и фон, и шрифт динамичные? Или может включить это как фон и не следует париться?

Мои попытки:

Answer 1

[Lord_Dantes]

Если нужно редактировать то область головы до шеи можно обрезать в принципе и наложить сверху, а там и фильтер и drop-shadow использовать

Comments

[artemphrog]

Спасибо, про filter: drop shadow не знал, помог

Answer 2

[Уктам Хамидов]

Блок-обертка(с размытым фоном и position relative)>>>блок с текстом(position relative, z-index 1) + блок с лисой(position absolute, right 0, z-index 2)

Comments

[artemphrog]

Спасибо, логику понял, именно так сделал

Answer 3

[Максим]

Надо Лису с прозрачным фоном (я какою нашёл)



Именно вот так и делается 3D эффект при наведении (Tilt)

Comments

[artemphrog]

Тут дело в том что дизайнер предполагал что именно морда лисы будет над текстом и отдельно вырезал морду. Если бы весь лис был бы как отдельный слой было бы гораздо легче, приходится идти на компромиссы.

[Максим]

artemphrog, покажите весь макет - как вы пришли к тому что только морда над текстом

[artemphrog]

Много Чего, https://www.dropbox.com/s/lt0xx5hbhve73fc/National...
Ссылка на макет. В слоях всё видно

[Максим]

artemphrog, если код надо будет - напишите