WebDev For You - Daily Interaction #105

site profile thumbnail

Description

Welcome to daily interaction #105! This demo showcases a recipe card animation on hover. When hovering over the card the image becomes full height, and the card moves forward on the z-axis. The card was placed in a wrapper with a perspective applied to it to bring the card forward. Also a timer icon with the time it takes to create each recipe shows in the upper-right hand corner when hovering. This could be a great recipe card for a food blog. Happy Webflowing! Inspired by: https://codepen.io/veronicadev/pen/WJyOwG To view more daily interactions and premium content visit: https://www.webdevforyou.com/ If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!
webdevforyoudailyinteractioninteractionsrecipecardshover effectshovercardcard-animationmarqueepoint-card

Related Made in Webflow Projects