You could try a 'before/after' reveal. They usually only work well with exact photos, but might be worth a look.
I've uploaded the images, 'before.jpg' and 'after.jpg' in the public_html folder, so I don't need a URL after 'scr='. However, it means I have to publish to see any changes, preview doesn't show the images.
Demo of the slider >>> Freddy <<<
Please don't think I had anything to do with the actual code. I'm a copy/paste person.
Change the path, scr= to where your images are. Title is literally the name of your slider, and alt= is the name screen readers and bots use.
Placeholder Head:
Code:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Before/After Slider</title>
<link rel="stylesheet" href="beforeafter.css">
</style>
Placeholder Body:
Code:
<div id="page">
<div class="wrapper">
<div class="before">
<img class="content-image" src="before.jpg" draggable="false" alt="Before Image">
</div>
<div class="after">
<img class="content-image" src="after.jpg" draggable="false" alt="After Image">
</div>
<div class="scroller">
<svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon
points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
</div>
</div>
</div>
<script src="beforeafter.js"></script>
Bookmarks