https://codepen.io/nonsalant/pen/gbYRJKd

Importing from a CDN

<link rel="stylesheet" href="https://unpkg.com/image-compare-light-dom/image-compare.css">
<script type="module" src="https://unpkg.com/image-compare-light-dom/image-compare.js"></script>

Importing from a local copy

1. Grab the files from the src folder.

2. Load the style and the main script (adjust the paths as needed):

<link rel="stylesheet" href="../src/image-compare.css">
<script src="../src/image-compare.js" type="module"></script>

<image-compare>
    <img src="before.jpg" alt="" width="" height="">
    <img src="after.jpg" alt="" width="" height="">
</image-compare>

Control how much of the first image is shown initially by adding an exposure attribute with a value between 0 and 100.

• 0 means the first image is completely hidden.
• 100 means the first image is fully visible.
• 50 means both images are half-shown, half-hidden.

E.g: <image-compare exposure="0">