Made in Webflow
WebDev For You - Daily Interaction #122
Description
Welcome to Daily Interaction #122.
This demo showcases a category card animation on hover.
For this effect two solid bars appear above and below the image, and a color overlay with text appears as well.
The effect was achieved by setting the category card wrapper to an overflow of hidden and to a flex setting of align stretch and justify space between. This places the two added div blocks at the top and bottom of the category card wrapper. Then a height of 20% was applied to each div block. Also a div block with a color and text was add to the category card wrapper.
Within interactions the top and bottom block were moved out of the wrapper, and the color overlay with text was set to an opacity to 0%. Then the top and bottom div blocks come back in and the color overlay with text is set to an opacity of 100% to come back in.
Inspired by: https://codepen.io/littlesnippets/pen/jyKOEx
To view more daily interactions and premium content visit:
https://www.webdevforyou.com/
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.
Share your feedback