WebDev For You - Daily Interaction #104

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: https://codepen.io/tamer_aka_remat/pen/GYyvoj If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!