Made in Webflow

WebDev For You - Daily Interaction #128

site profile thumbnail


Welcome to Daily Interaction #128. This demo showcases a project card animation on hover. With this effect a panel rotates in from the left to reveal more information about the image, and the image also slides to the right, as if to make room for the panel. The effect was achieved by placing an image wrapper and a content wrapper within a wrapper with a child perspective applied to it. The content wrapper was set to 50% within the 3d-wrapper and the transform-origin was set to the left so it would rotate in from the left side. Another div block with the background image was added inside of the image wrapper, and the image wrapper was set to an overflow of hidden so that when the image slides to the right you don't see it beyond the bounds of the image wrapper. In interactions I rotated the content wrapper from -90 degrees to 0 degrees, and moved the image to the right 50%. 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.

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.

webdevforyoudailyinteractiondailyinteractions3d effect3d animation3dtransforms3dcardsimagehoverhover effectshover

More by WebDev For You

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