Made in Webflow

WebDev For You - Daily Interaction #124

site profile thumbnail


Welcome to Daily Interaction #124. This demo showcases a category card animation on hover. With this effect lines scale in from the top-left and bottom right around the image. There are two blocks around the image and the lines for each block start animating at opposite angles to create an interesting line effect around the image. The effect was achieved by placing two absolute div blocks inside of the card wrapper and then moving the first div block a bit to the upper left, and the second div block towards the bottom right. Then in the absolute div blocks 4 div blocks were added to represent the lines. The lines have a size of 1 px, and were placed on each side of the div block. I changed the transform-origin for each line to make sure it scaled in from the correct place. In interactions I started each line at a scale of 0 and then scaled it back to 1. Inspired by:
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.
webdevforyoudailyinteractiondailyinteractionsimagehoverhover effectshover

More by WebDev For You

See profile
View details
WebDev For You - Daily Interaction #8