Looking to add a unique and interactive touch to your Webflow site? The Mouse Card Hover Effect Webflow cloneable by WebDevForYou is the perfect solution. This innovative cloneable features a dynamic project card animation that will captivate your audience and showcase your projects in style.
Key Features
1. Flipping Card Animation
Upon clicking, the project card flips 180°, revealing additional content on the backside. This engaging interaction is achieved by placing the card in a 3D wrapper and adding child perspective, creating a seamless rotation effect.
2. Hover-Over Animation
When you hover over the card, stars scale in and out behind the image, adding a magical touch. The image itself moves around the card, following the mouse's movement. This is accomplished using a 6x8 grid of 50x50 blocks within two div blocks inside the cross. The stars are set to rotate, scale, and loop on hover, while the crosses return to their original size and stop rotating when the hover ends.
3. Mouse Move Interaction
The image within the card moves 20px to each side as the mouse moves around, creating a dynamic and interactive experience. This is done through a mouse move over element interaction, adding depth and engagement to your project cards.
Easy Implementation and Customization
Implementing the Mouse Card Hover Effect on your Webflow site is straightforward. Simply add the cloneable to your page and adjust the settings to fit your specific needs. Whether you want to tweak the animations or change the grid layout, this cloneable offers flexibility and ease of use.
Categories
- 3D Transform
- Card
- Interactions
- Hover
With the Mouse Card Hover Effect, you can transform your project cards into interactive masterpieces. Elevate your Webflow site today and leave a lasting impression on your visitors.
---
Ready to add some flair to your Webflow projects? Check out the Mouse Card Hover Effect cloneable by WebDevForYou and start customizing!
Looking to add a unique and interactive touch to your Webflow site? The Mouse Card Hover Effect Webflow cloneable by WebDevForYou is the perfect solution. This innovative cloneable features a dynamic project card animation that will captivate your audience and showcase your projects in style.
Key Features
1. Flipping Card Animation
Upon clicking, the project card flips 180°, revealing additional content on the backside. This engaging interaction is achieved by placing the card in a 3D wrapper and adding child perspective, creating a seamless rotation effect.
2. Hover-Over Animation
When you hover over the card, stars scale in and out behind the image, adding a magical touch. The image itself moves around the card, following the mouse's movement. This is accomplished using a 6x8 grid of 50x50 blocks within two div blocks inside the cross. The stars are set to rotate, scale, and loop on hover, while the crosses return to their original size and stop rotating when the hover ends.
3. Mouse Move Interaction
The image within the card moves 20px to each side as the mouse moves around, creating a dynamic and interactive experience. This is done through a mouse move over element interaction, adding depth and engagement to your project cards.
Easy Implementation and Customization
Implementing the Mouse Card Hover Effect on your Webflow site is straightforward. Simply add the cloneable to your page and adjust the settings to fit your specific needs. Whether you want to tweak the animations or change the grid layout, this cloneable offers flexibility and ease of use.
Categories
- 3D Transform
- Card
- Interactions
- Hover
With the Mouse Card Hover Effect, you can transform your project cards into interactive masterpieces. Elevate your Webflow site today and leave a lasting impression on your visitors.
---
Ready to add some flair to your Webflow projects? Check out the Mouse Card Hover Effect cloneable by WebDevForYou and start customizing!
