Mastodon Feed: Post

Reblogged by slightlyoff@toot.cafe ("Alex Russell"):

anatudor ("Ana Tudor 🐯") wrote:

Minimal interactive before vs. after image comparison slider on @codepen
https://codepen.io/thebabydino/pen/MWMvxxX

✨ a single element, no ::before or ::after
✨ under 20 CSS declarations
✨ JS only needed to update 1 CSS variable on drag

Can you guess how I did it before checking the demo?

#css #frontend #imageEffect #code #coding #web #webDev #dev #js #javascript #webDevelopment

Attachments:

• Comparison slider. Shows an image that is made black and white after (on the right of) the slider thumb vs. its original version before (on the left of) the slider thumb.