A tool by YellowAfterlife (web · cohost)
Links: source code · more tools!
Controls: toggle dark mode

CSS-only reveal/comparison generator!

For cohost! and in general

New: a blog post on how it works

General
Image 1
Alt text 1
Image 2
Alt text 2
Width
Height
	Images should: Be opaque Have the same dimensions
Direction	Toggle Right Left Up Down
Controls
Background
Color
Custom CSS	box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.3) border-radius: 50%
"Reveal" button
Label
Custom CSS	top: 0.3rem left: 0.3rem
"About" button
	Enable
Label
Custom CSS	right: 0.3rem bottom: 0.3rem transform: scale(70%)
Popup HTML	<a href="https://yal.cc/tools/cohost/reveal-generator/">Template</a> by YellowAfterlife.<br> Dragging might not work with touch!
Popup CSS	position: absolute right: 2.5rem bottom: 0.5rem padding: 0.2rem 0.5rem box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.3) background: white color: black max-width: calc(100% - 3.5rem)
Other stuff
	Use CSS classes (for prechoster / your own site)
	Add styles for safety (enable if images don't line up on your own site)
Settings

Preview:

Here's the HTML:

And here's CSS (if enabled):