LoginGet started — it’s free
Made in Webflow

WebDev For You - Daily Interaction #128

Clone in Webflow520
WebDev For You's avatar
by WebDev For You
2.4k
site profile thumbnail

Description

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: https://tympanus.net/Tutorials/CaptionHoverEffects/index4.html 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.
webdevforyouwebflowdailyinteractiondailyinteractions3d effect3d animation3dtransforms3dcardsimagehoverhover effectshover

More by WebDev For You

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