Как сделать слайдер-сравнение до/после с png изображениями?

Question

[Dymok]

Есть основа слайдера-сравнения до/после, которая походит для изображений с фоном, но нужно реализовать сравнение изображений с прозрачностью

Но помимо показа определенной части второго изображения, нужно скрывать часть первого изображения, которая перекрывается, чтобы получилось подобное:
Каким способом можно это сделать?

Answer 1

[Анита Ковалева]

Before\After Slider
На codepen по тэгу before\after slider много вариаций с перекрытием, на любой вкус.

Comments

[Dymok]

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

Answer 2

[Дмитрий Комчев]

Слайдер до-после

Comments

[Dymok]

можно ли полностью читать вопрос?
не подходит под изображения с прозрачным фоном

Answer 3

[Mihail]

Столкнулся с подобной задачей, решил с помощью css свойства clip-path