Earlier this year, I made an image reveal/frame comparison generator for use with cohost!.
With website set to close at the end of this year, I have updated the tool to output that's easier to use outside of cohost!.
The idea is that you supply two image URLs, tweak a few settings, and get something like this back:
(if you are on iOS, resize-dragging is not currently supported - tap here for an animated preview)
And this works without any JavaScript!
The generator is available online, and in this post I go over how it works and what else it can do.
How it works
You can have resizeable elements using resize property!
On cohost!, this has been used for quite a few interactive pieces, from simple jests like adjustable hummingbird or Eggbug Adventure to @blackle's impressive CSS Gizmo.
What follows is series of interactive mini-demos.
Let's start with a resizeable div in another div:
And we can put in images as backgrounds...
but how big should those divs be, exactly?
The inner div can be given a background-size: auto 100% to fit to height,
but we still need to get the size/aspect ratio right on the outer div.
There are a few solutions to this.
One is to hard-code aspect ratio using the somewhat recent aspect-ratio property
or an old padding trick.
I don't like the opportunity for error that this introduces.
The other is to put an image element with width of 100% and height of auto and let the container fit it:
And this works well! As an added bonus, you can now right-click and "Save as" the source image without using "Inspect element".
However, the resize handle is on the bottom of the image.
Alas, there is not yet a way to specify where the resize handle should be, but we could... make a smaller div that serves as a vertically-centered handle and defines the size for the overlay div?
And that's all good!
Usually the resize area would end halfway through the handle, but while writing this post I noticed that applying a CSS transform does not affect parent element auto-sizing, so that's now lined up nicely.
I have also attempted to make the draggable region bigger by applying scale(2) to it,
but apparently this messes up dragging in Firefox, so I guess I'm not doing that for now.
For the final touches, there is the fallback-button (it's just a disclosure element that puts the second image over the first one) and the about-button (also a disclosure element).
To have right-to-left and bottom-to-top dragging, I mirror the resize element and use a flebox container to pin it to one or other side. Perhaps there's a better way?
What else can it do
You can have these go in all directions! Or stick to a button reveal.
|
↔
👀 |
↕
👀 |
|
↕
👀 |
🍴 |
Further considerations
Perhaps you could add a little JavaScript to support dragging on iOS?
And the code could definitely be cleaner, but who's going to read it, anyway
Thanks for reading!
The generator is available online.
The source code is on GitHub.