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

Question

[bbquite]

Есть картинка с прозрачностью .5
И нужно чтобы поверх ее была еще одна такая же картинка уменьшенная в несколько раз и без прозрачности которая бы двигалась при скролле (движение при скролле я сам сделаю) т/е чтобы картинки сходилсь 1 в 1 так как как будто эта область без прозрачности

Что то типа такого

Подскажите как это сделать, или пример реализации

Comments

[robprane]

Вы только прозрачность не можете реализовать или что?
Вот прозрачность:
filter: opacity(0.5);

Answer 1

[Ankhena]

Я предложила вариант с одной картинкой

Answer 2

[andand44]

Одна и та же картинка выводится в фоне и в img. Прозрачность делается стилями.
https://jsfiddle.net/szencf5a/
Так на авито сделаны вертикальные фото на детальной странице объявления.

Comments

[bbquite]

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

[andand44]

При чем тут тогда уменьшенная в несколько раз картинка? Или речь идет о маске на изображение? Если да, то это с помощью svg делается.
https://technoteinfo.ru/post/ispolzovaniye-masok-v...

Answer 3

[Александр Варлаков]

Привет, так что-ли?

Comments

[bbquite]

нужно чтоб они сходились 1 в 1

[Александр Варлаков]

Антон, не понял?

[bbquite]

Александр Варлаков, обновил вопрос "т/е чтобы картинки сходилсь 1 в 1. Т.е. так как как будто эта область без прозрачности"

[Александр Варлаков]

Так это картинку надо подобрать определенного типа, как с краном и подобрать размеры

[Александр Варлаков]

[Александр Варлаков]

Антон, Оно? Если да, то все понятно?

[bbquite]

Александр Варлаков, сейчас посмотрю, спасибо