/image-compare

Example of using a range input and CSS mask to compare two images positioned on top of each other.

Primary LanguageHTML

Image Compare

Details

  • Example of using a range input and CSS mask to compare two images positioned on top of each other.
  • JavaScript is only used to pass the range value to a CSS variable that controls the position of the masks.
  • Works on touch devices.

Considerations

  • ::-moz-range-thumb and ::-webkit-slider-thumb weren't used to style the range handle, since styling options are limited.