Как добиться такого эффекта для двух пересекающихся картинок?

Question

[Alice777]

Есть сайт e03.epicurrence.com/, там реализован момент наложения background-blend-mode: multiply;, однако он применен каким-то образом именно в область пересечения двух картинок. Как это реализовать?

Я тут набросал, может кто поможет
https://jsfiddle.net/or7ta4pd/

Comments

[Ярослав Иванов]

Ну так у вас все получилось. В чем вопрос ?

Answer 1

[Сергей Соколов]

Есть два способа:

• CSS свойство mix-blend-mode для накладывающихся элементов;
  
• CSS свойство background-blend-mode для множественных фонов одного элемента.
  

Первый вариант: mix-blend-mode: multiply;Fiddle

Второй вариант, когда обе картинки – фон одного элемента:

.fx {
  background-image: url( bg1.png ), url( bg2.png );
  background-repeat: no-repeat, no-repeat;
  background-blend-mode: multiply, normal;
}

Fiddle

Comments

[Alice777]

Скажите, а сверстать это дело можно как-то по-другому? мне просто нужен отдельный див с картинкой и отдельный с изображением(для анимации каждого элемента либой)???, спасибо

[Сергей Соколов]

Alice777: можно анимировать размер и положение каждого из фонов.

[Сергей Соколов]

Alice777, обновил ответ.

[Роман Филиппов]

Вопрос, а что мене ресуро-емкое из этих процессов?

Answer 2

[ой всё]

это не картинка а большая буква
P

.supertext p {
    font-size: 1200px;
}
.supertext p {
    font-size: 1400px;
    font-family: FuturaBT-Bold,sans-serif;
    line-height: 100%;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    color: #00c775;
    font-weight: 700;
    mix-blend-mode: multiply;
    pointer-events: none;
}

Answer 3

[Николай Чуприк]

Мой скромный опыт подсказывает только вариант с SVG-масками. Два дива, один на другом: первый с нормальными бабами, второй — с зелёными. На каждый див наложить противоположные маски, дополняющие друг друга. Маски анимировать.