LoginGet started — it’s free
Made in Webflow

Automatic Colour Adaptive Cards

687 views
site profile thumbnail

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.
cardscardshoversmartcolorcloneablecustomcode

More by Dhruv Sachdev

See profile
View details
20 Line Hover Animations
513
890
© 2022 Webflow, Inc. All rights reserved.