WebDev For You - Daily Interaction #135
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.
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.