Made in Webflow

WebDev For You - Daily Interaction #104

site profile thumbnail


Welcome to daily interaction #104! This demo showcases a card with social media panels that appear when hovering over the dots on the right. The dots are color coded to match the brand color of each social media platform. You can also place text or icons inside these dots. On hover a panel appears with the brand color and a large icon. The image also rotates from -10 degrees to 10 degrees on hover. The animation is pretty straight forward. The only thing to note is that I had to place the dots and the panels in the same wrapper so that when I hovered over the dots I could target sibling elements within the interaction. This allowed me to make sure the effect could be repeated across multiple cards by targeting the sibling classes (panels) of the dots. Happy Webflowing! Inspired by: If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!
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.

webdevforyoudailyinteractioninteractionssocialmediacardshover effectshover

More by WebDev For You

See profile
View details
WebDev For You - Daily Interaction #8