Guide
- Liquid mask
- Hover effect
Guide
- Liquid mask
- Hover effect
Guide
- Liquid mask
- Hover effect
Creating a Liquid Mask Hover Effect on Your Website
In this blog, I’ll show you exactly how to create this crazy liquid hover effect, in your own Framer site. you’ll have an interaction that will leave visitors saying “wow.” No code required.
Posted by
Nandi
Table of contents
Getting started
The other day I was browsing the Obys agency website and stumbled across this insane liquid mask hover interaction. It immediately caught my eye. Smooth, fluid, almost like paint flowing across the screen. Naturally, I thought, “Alright, I need to bring this into Framer.”
Getting started
The other day I was browsing the Obys agency website and stumbled across this insane liquid mask hover interaction. It immediately caught my eye. Smooth, fluid, almost like paint flowing across the screen. Naturally, I thought, “Alright, I need to bring this into Framer.”
Getting started
The other day I was browsing the Obys agency website and stumbled across this insane liquid mask hover interaction. It immediately caught my eye. Smooth, fluid, almost like paint flowing across the screen. Naturally, I thought, “Alright, I need to bring this into Framer.”
Obys agency website.
Obys agency website.
Obys agency website.
At first, it wasn’t the easiest thing to recreate. But after some experimenting, I ended up with a working version, and today, I’ll show you exactly how you can add the same effect to your own Framer sites. No code required.
Grab the liquid mask hover component
Grab the Liquid Mask Hover. You’ll land on a resource page with a preview of the effect.
In the top-right corner, click Copy Component.
Then, open your Framer project, paste it inside your design, and position it. For example, I dropped mine inside a card and centered it.
At first, it wasn’t the easiest thing to recreate. But after some experimenting, I ended up with a working version, and today, I’ll show you exactly how you can add the same effect to your own Framer sites. No code required.
Grab the liquid mask hover component
Grab the Liquid Mask Hover. You’ll land on a resource page with a preview of the effect.
In the top-right corner, click Copy Component.
Then, open your Framer project, paste it inside your design, and position it. For example, I dropped mine inside a card and centered it.
At first, it wasn’t the easiest thing to recreate. But after some experimenting, I ended up with a working version, and today, I’ll show you exactly how you can add the same effect to your own Framer sites. No code required.
Grab the liquid mask hover component
Grab the Liquid Mask Hover. You’ll land on a resource page with a preview of the effect.
In the top-right corner, click Copy Component.
Then, open your Framer project, paste it inside your design, and position it. For example, I dropped mine inside a card and centered it.
Liquid mask hover effect.
Liquid mask hover effect.
Liquid mask hover effect.
Remove the background & see the effect
If your frame already has a background color, remove it so the liquid mask takes full effect. Once that’s done, you’ll see the component sitting nicely in place, ready to be customized.
Customize your base and hover images
The magic of this component lies in swapping images. In the right-hand Properties Panel, you’ll find two slots:
Base Image → the default state of your card.
Hover Image → the image that reveals itself when users hover.
By default, you’ll see placeholder images. Replace them with your own—either upload files or use the Unsplash plugin to pull in something fresh. Instantly, your design comes alive.
Play with the liquid settings
This isn’t just a static hover effect, you get full control over how liquidy it feels. On the properties panel, tweak:
Blob size – how large the liquid “splash” feels.
Radius – the roundness of the mask edges.
Boost – how quickly the effect flows on hover.
Texture – adds extra movement and organic feel around the edges.
As you adjust, you’ll see everything update live on the canvas, which makes experimenting super fun.
Remove the background & see the effect
If your frame already has a background color, remove it so the liquid mask takes full effect. Once that’s done, you’ll see the component sitting nicely in place, ready to be customized.
Customize your base and hover images
The magic of this component lies in swapping images. In the right-hand Properties Panel, you’ll find two slots:
Base Image → the default state of your card.
Hover Image → the image that reveals itself when users hover.
By default, you’ll see placeholder images. Replace them with your own—either upload files or use the Unsplash plugin to pull in something fresh. Instantly, your design comes alive.
Play with the liquid settings
This isn’t just a static hover effect, you get full control over how liquidy it feels. On the properties panel, tweak:
Blob size – how large the liquid “splash” feels.
Radius – the roundness of the mask edges.
Boost – how quickly the effect flows on hover.
Texture – adds extra movement and organic feel around the edges.
As you adjust, you’ll see everything update live on the canvas, which makes experimenting super fun.
Remove the background & see the effect
If your frame already has a background color, remove it so the liquid mask takes full effect. Once that’s done, you’ll see the component sitting nicely in place, ready to be customized.
Customize your base and hover images
The magic of this component lies in swapping images. In the right-hand Properties Panel, you’ll find two slots:
Base Image → the default state of your card.
Hover Image → the image that reveals itself when users hover.
By default, you’ll see placeholder images. Replace them with your own—either upload files or use the Unsplash plugin to pull in something fresh. Instantly, your design comes alive.
Play with the liquid settings
This isn’t just a static hover effect, you get full control over how liquidy it feels. On the properties panel, tweak:
Blob size – how large the liquid “splash” feels.
Radius – the roundness of the mask edges.
Boost – how quickly the effect flows on hover.
Texture – adds extra movement and organic feel around the edges.
As you adjust, you’ll see everything update live on the canvas, which makes experimenting super fun.
The properties of liquid mask hover component in Framer.
The properties of liquid mask hover component in Framer.
The properties of liquid mask hover component in Framer.
Enjoy your no-code hover interaction
And that’s it, you now have a fully working liquid mask hover effect running inside Framer. It looks premium, it feels playful, and the best part? You didn’t have to write a single line of code.
Why this works so well
Hover effects are one of the easiest ways to add delight to your website, but most hover states feel flat. This liquid mask instantly levels up any card, gallery, or portfolio section, it gives your site that “wow” factor visitors remember.
Enjoy your no-code hover interaction
And that’s it, you now have a fully working liquid mask hover effect running inside Framer. It looks premium, it feels playful, and the best part? You didn’t have to write a single line of code.
Why this works so well
Hover effects are one of the easiest ways to add delight to your website, but most hover states feel flat. This liquid mask instantly levels up any card, gallery, or portfolio section, it gives your site that “wow” factor visitors remember.
Enjoy your no-code hover interaction
And that’s it, you now have a fully working liquid mask hover effect running inside Framer. It looks premium, it feels playful, and the best part? You didn’t have to write a single line of code.
Why this works so well
Hover effects are one of the easiest ways to add delight to your website, but most hover states feel flat. This liquid mask instantly levels up any card, gallery, or portfolio section, it gives your site that “wow” factor visitors remember.
