Discover the best cardshover websites created by professional designers. Get inspired and start planning your perfect cardshover web design today!

This cloneable is a simple horizontal scrolling cards section. I have designed the cards for horizontal scrolling on desktop/ tablet and vertically stacked on mobile. 

Since it's using a flexbox, you can add/ remove cards, and the size will auto-adjust, so the scroll will still work! Although you should resize the scroll track if you reduce a lot of cards.

You can add a background video to each card, which can be revealed on hover for a neat effect :) 

This cloneable is fully built-in Webflow.

Simple Horizontal Cards

Hello Everyone !

I am back with another cool card hover effect , 
this can be used in personal portfolios

You can change the angle if you want from transformations and also you can change the layout if you want  :)
Let me know if you have any questions !

Follow for more awesome stuff !
and if you want to hire me , you can press Hire Me or Email me at kingfactory1234@gmail.com  

Thanks Stay Healthy and Safe !

Tilted card hover effects

Tilted Cards hover Effect

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

Smart Cards

Automatic Colour Adaptive Cards

We added magnificent hover card effects to the design for a woman's beauty care brand. 🌊 Maybe you can guess that it focuses on products made with natural sea ingredients 🌊

Follow us:
 👉 dribbble.com/halolab
 👉 instagram.com/halolabteam

Transition hover effect product cards

Fensea Product Cards

Image Cards

hoveecards

Creating designs that can be easily adapted to your projects and your own solutions. With my minimalistic approach and clean aesthetics my clones can be applied with ease to whatever you’re working on. 

– Take a look at this minimalist services card section with hover interaction

If you have any questions on the set up or how to make adjustments to the components you can comment here or reach out to me on 
Instagram: @christinejohannessen_
LinkedIn: linkedin.com/in/christine-johannessen

If you're enjoying my posts, please consider supporting me so I can keep improving my web design skills. 

https://www.buymeacoffee.com/chrjohannessen

service-section

Minimalistic Services Section

Mouse move animation is a popular technique used in web design to create engaging and interactive experiences for users.

Mouse move animation works by triggering an animation when a user moves their mouse over a specific element on your website. This animation can be used to highlight a feature, showcase a product, or simply add visual interest to your page.

To create a mouse move animation in Webflow and Figmatic, you'll need to use interactions to define the animation that will occur. You can choose from a variety of animation options, such as transform, opacity, and scale, and set the duration and easing options.

By creating engaging mouse move animations, you can make your website stand out and capture the attention of your users. Whether you're a designer looking to showcase your work or a business owner looking to create a memorable online presence, Mouse move animations can help you achieve your goals.

Discover cardshover websites built by the Webflow community

Discover cardshover websites built by the Webflow community