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

Full Landing Page + All Details - https://janlosert.com/webflow-cards

My first fully web-based UI Template, 100% developed in Webflow Designer. All elements ready to copy & paste or fully clone into your projects! 

I prepared all styles for all the main typography elements (H1-H6, links, paragraphs etc.), button, tags, alerts or social icons. And then using these “atoms” create as many cards as possible for you to have a nice starting field for new designs. I ended up with 28 cards in total My main aim was to create something visually beautiful for new users or developers who are, to put it nicely non-designers.. All of them are obviously responsive in all Webflow stages. There are 2 hero sections, nice product cards, article thumbnails for the blog or even sign up dialogue with all form elements covered.

Cards - Webflow UI Kit

Welcome to daily interaction #103!

This demo showcases a card with a call-to-action (CTA) button that appears at an angle when the user hovers. This can be a great way to let users know that when they click they will be taken to another page.

To create this animation I first created a card wrapper with the elements in it. I set the card wrapper to a position of relative. I then placed a div block inside of the card wrapper and set the position to absolute and 50% width and 120% height so that I could angle it in and not lose height at the top. I then moved this div block 100% to the right from the card. With interactions I rotated this div block -10 degrees. I also placed an arrow in the slanted div block and rotated the arrow 10 degrees to offset the -10 angle. The border also changes color on hover.

Happy Webflowing!

Inspired by: https://codepen.io/andrewsims/pen/mQoYwz

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev for You - Daily Interaction #103

WebDev For You - Daily Interaction #103

Welcome to Daily Interaction #121.

This demo showcases a project card animation on hover.

When hovering over the image a card with the title, author, and view project button appear from the upper left above the image.

The effect was achieved by placing a div block inside of the project card wrapper. In interactions the div block was set to an opacity of 0% initially. Then on hover the div block moves to the lower right and the opacity changes to 100%. On hover out the div block returns to its original position and the opacity changes to 0%.

Inspired by the project card here: https://tympanus.net/Tutorials/CaptionHoverEffects/index.html

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev for You - Daily Interaction #121

WebDev For You - Daily Interaction #121

RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

Discover hover card websites built by the Webflow community

Discover hover card websites built by the Webflow community