New
New
New
Guide
- Effects
- Components
Guide
- Effects
- Components
Guide
- Effects
- Components
How To Add Interactive Hover Background in Framer
Posted by
Nandi
Table of contents
Copy the component
First things first, grab the hover chroma backgrounds component and drop it into your project.
You’ll find it in the resources page. Once it’s in your canvas, you’re ready to make magic happen.
Copy the component
First things first, grab the hover chroma backgrounds component and drop it into your project.
You’ll find it in the resources page. Once it’s in your canvas, you’re ready to make magic happen.
Copy the component
First things first, grab the hover chroma backgrounds component and drop it into your project.
You’ll find it in the resources page. Once it’s in your canvas, you’re ready to make magic happen.
Position it as a background
To make sure that the effect is applied to the whole area of the background, we need to position it in a way that it takes up the full width and height of the background.
Here’s how:
Select the component.
Set its position to absolute in the right panel.
Activate all the layout pins (top, bottom, left, right) and set them to 0.
This makes the chroma background stretch across the full width and height of its parent frame.
Works like a charm on both dark and light backgrounds! :)
Position it as a background
To make sure that the effect is applied to the whole area of the background, we need to position it in a way that it takes up the full width and height of the background.
Here’s how:
Select the component.
Set its position to absolute in the right panel.
Activate all the layout pins (top, bottom, left, right) and set them to 0.
This makes the chroma background stretch across the full width and height of its parent frame.
Works like a charm on both dark and light backgrounds! :)
Position it as a background
To make sure that the effect is applied to the whole area of the background, we need to position it in a way that it takes up the full width and height of the background.
Here’s how:
Select the component.
Set its position to absolute in the right panel.
Activate all the layout pins (top, bottom, left, right) and set them to 0.
This makes the chroma background stretch across the full width and height of its parent frame.
Works like a charm on both dark and light backgrounds! :)
Absolute positioning with layout pins.
Absolute positioning with layout pins.
Absolute positioning with layout pins.
Layer it right
Okay, now let’s make sure it sits behind all your content:
Open the layers panel and adjust the layer ordering.
Or just adjust the z-index (you’ll find this under the styles section on the right and layers with greater z-index values will be on top of others).
Super quick, and your content stays front and center while the background does its thing.
Layer it right
Okay, now let’s make sure it sits behind all your content:
Open the layers panel and adjust the layer ordering.
Or just adjust the z-index (you’ll find this under the styles section on the right and layers with greater z-index values will be on top of others).
Super quick, and your content stays front and center while the background does its thing.
Layer it right
Okay, now let’s make sure it sits behind all your content:
Open the layers panel and adjust the layer ordering.
Or just adjust the z-index (you’ll find this under the styles section on the right and layers with greater z-index values will be on top of others).
Super quick, and your content stays front and center while the background does its thing.
Pick your vibe
Here’s where it gets fun! The chroma component comes with six different styles:
Liquid
Folds
Smoke
Flow
Pixel
Ascii
Just head to the “style” property in the right panel and try them all until you find the one that hits just right. I’m a sucker for the liquid effect, but you do you!
Pick your vibe
Here’s where it gets fun! The chroma component comes with six different styles:
Liquid
Folds
Smoke
Flow
Pixel
Ascii
Just head to the “style” property in the right panel and try them all until you find the one that hits just right. I’m a sucker for the liquid effect, but you do you!
Pick your vibe
Here’s where it gets fun! The chroma component comes with six different styles:
Liquid
Folds
Smoke
Flow
Pixel
Ascii
Just head to the “style” property in the right panel and try them all until you find the one that hits just right. I’m a sucker for the liquid effect, but you do you!
Chroma background styles in Framer.
Chroma background styles in Framer.
Chroma background styles in Framer.
Preview and tweak
Hit preview and watch the magic happen! Tweak the styles, or layer positioning until it feels just right.
Let’s see what you’ve got!
Preview and tweak
Hit preview and watch the magic happen! Tweak the styles, or layer positioning until it feels just right.
Let’s see what you’ve got!
Preview and tweak
Hit preview and watch the magic happen! Tweak the styles, or layer positioning until it feels just right.
Let’s see what you’ve got!
Give it a shot and let me know how it turns out. Make sure to tag me on Twitter (@learnframer) to show me what you’ve created.
Can’t wait to see your work! <3
Give it a shot and let me know how it turns out. Make sure to tag me on Twitter (@learnframer) to show me what you’ve created.
Can’t wait to see your work! <3
Give it a shot and let me know how it turns out. Make sure to tag me on Twitter (@learnframer) to show me what you’ve created.
Can’t wait to see your work! <3
