LoginGet started — it’s free
Made in Webflow

WebDev For You - Daily Interaction #122

Clone in Webflow139
WebDev For You's avatar
by WebDev For You
site profile thumbnail


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.
webdevforyouwebflowdailyinteractiondailyinteractionsimagehoverhover effectshover

More by WebDev For You

See profile
View details
WebDev For You - Daily Interaction #8
© 2022 Webflow, Inc. All rights reserved.