Image Comparison

Fully featured Image Comparison component using CSS only, no JS at all

Example

       Drag the resizer here 👆 to move the overlay slide

Code

<div class="cssonly-image-comparison">
  <div>
    <img src="https://cssonly.vercel.app/img_snow.jpg" />
  </div>
  <div>
    <img src="https://cssonly.vercel.app/img_forest.jpg" />
  </div>
</div>

Options

CSS Variables

--height: <px> // default value: 400px
--width: <px> // default value: 600px
--initial-overlay-width: <percent> // default value: 50%

Note: The first image overlay can be also a css-filter div instead of an image,As you can see example below.

Custom examples

Initial overlay width

Custom filter overlay

Edit this page on GitHub
Table of Contents