WebDev For You - Daily Interaction #102

site profile thumbnail

Description

Welcome to daily interaction #102! This one was a lot of fun. It is a profile card that has different shapes scaling and moving over the card on hover. I might do more of these with different shapes and animations. The top circle has social media icons to make it a more functional card, and the bottom has the name of the person in the rectangle. The part that took the longest was actually adding all the shapes into the card. I used specific wrappers and then positioned certain shapes around the wrapper with a position of absolute. For the rectangles at the bottom I skewed them on the x-axis to -20px. One thing to note, is that when you add a 'move' interaction to these shapes the skew property gets removed so you have to add the skew property as an initial state in the interaction as well. Happy Webflowing! Inspired by: https://codepen.io/chhiring90/pen/zLJLBG And if you'd like more information on how this interaction was accomplished be sure to join the Slack Community!
webdevforyoudailyinteractioninteractionsimagehoverprofilecardsocialmediahover effectshover

More by WebDev For You

See profile