LoginGet started — it’s free
Made in Webflow

WebDev For You - Daily Interaction #135

4033 views
site profile thumbnail

Description

Welcome to Daily Interaction #135. This demo showcases a project card animation on hover. With this effect the title and caption move on hover. A "View Project" appears and moves down with an underline animation. There is also a cover overlay that moves and appears from the upper-left on hover. This effect was achieved by creating a card wrapper and placing the color overlay inside of it with a position of absolute and full. Then a text wrapper was added to the card wrapper in the center with a heading, text block, and view project text block. The 'view project' text and underline were added inside of another wrapper. Then with interactions I had the different elements move and the underline scale. Inspired by: https://www.everess.fr/ There will be no daily interactions for a while as I am currently working on a few other projects. Stay tuned for the new projects! 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.
webdevforyouwebflowdailyinteractiondailyinteractionscardimagehoverhover effectshover

More by WebDev For You

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