Component
Image Hover Card in Framer
This is a Framer recreation of the image hover card interaction from Brandarchive's website. Remix this project to see how the animation is built in Framer.
About the resource
To recreate this hover interaction in Framer, I set up a component with multiple variants. In the primary variant, images are stacked, with the top image at full opacity and the rest at zero. The top image is positioned relatively, while the others are absolutely positioned with zero pins so they take up the full space.
Above the images, I added a second stack containing 10 equal trigger areas. These trigger different variants by changing the visible image. The trigger areas have no gaps and a higher z-index than the images to keep them interactive.
For the hover interaction, I connected each trigger to its corresponding variant—hovering over trigger 1 switches to variant 1, and so on. I set the transition to instant to achieve the exact effect as original.
About the resource
To recreate this hover interaction in Framer, I set up a component with multiple variants. In the primary variant, images are stacked, with the top image at full opacity and the rest at zero. The top image is positioned relatively, while the others are absolutely positioned with zero pins so they take up the full space.
Above the images, I added a second stack containing 10 equal trigger areas. These trigger different variants by changing the visible image. The trigger areas have no gaps and a higher z-index than the images to keep them interactive.
For the hover interaction, I connected each trigger to its corresponding variant—hovering over trigger 1 switches to variant 1, and so on. I set the transition to instant to achieve the exact effect as original.
About the resource
To recreate this hover interaction in Framer, I set up a component with multiple variants. In the primary variant, images are stacked, with the top image at full opacity and the rest at zero. The top image is positioned relatively, while the others are absolutely positioned with zero pins so they take up the full space.
Above the images, I added a second stack containing 10 equal trigger areas. These trigger different variants by changing the visible image. The trigger areas have no gaps and a higher z-index than the images to keep them interactive.
For the hover interaction, I connected each trigger to its corresponding variant—hovering over trigger 1 switches to variant 1, and so on. I set the transition to instant to achieve the exact effect as original.
The multiple variants of the card component in Framer.
The multiple variants of the card component in Framer.
The multiple variants of the card component in Framer.
