Automatic Colour Adaptive Cards
Description
*Open live site to view effect*
This is a card component that reveals details on hover. The cards will analyse the "dominant" colour within the card's image and adapt to match the image theme.
I've added a configurable "GRADIENT_MODE" setting in Custom Code which, when set to "true", will instead programmatically generate a "gradient" instead of a solid colour using the two most prominent colours in the image - this gives a nice effect too.
The hover interaction is switched for an "on-scroll" trigger on tablet/ mobile - this way, the cards will expand as they are in view :)
The image colour palette is analysed and extracted using the brilliant colour-thief.js adapted to Webflow's hosting policies (CORS 😅) using a proxy from Google. The card images are nfts by fvck_crystal.
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
We miss comments too!
Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!
As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.