WebDev For You - Daily Interaction #105

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!
Similar sites

34
137

79
466

31
125

95
553

63
491

49
393