Component
Liquid Mask Hover in Framer
This is a Framer component inspired by the liquid mask hover effect seen on Obys agency’s website. Simply drop it into your project and customize the size, blur, texture, and speed to shape the fluid motion. On hover, it reveals your chosen image through an organic, flowing mask for a smooth interactive effect.
Created by
About the resource
The Liquid Mask Hover component in Framer lets you create a gooey, liquid-like effect that reveals an image when hovered. You can set a base image that’s always visible and a hover image that appears through the mask, with the option to adjust the card’s border radius for rounded corners. The gooey effect itself is highly customizable: you can control the size of the liquid area, use blur to make the edges softer or sharper, and adjust the boost to make the effect more or less intense. To add texture, the grain control lets you choose between a smooth look or a more organic, noisy appearance, and you can animate this texture with a speed setting to make the liquid feel more flowing and alive.
There’s also a preview mode so you can test the effect directly on the canvas without hovering. On top of that, you can enable hover effects to add a zoom animation, adjusting the scale and transition style for smooth interactions. Together, these settings make it easy to create an engaging, interactive hover effect that feels playful, organic, and fully customizable—all without writing code.
About the resource
The Liquid Mask Hover component in Framer lets you create a gooey, liquid-like effect that reveals an image when hovered. You can set a base image that’s always visible and a hover image that appears through the mask, with the option to adjust the card’s border radius for rounded corners. The gooey effect itself is highly customizable: you can control the size of the liquid area, use blur to make the edges softer or sharper, and adjust the boost to make the effect more or less intense. To add texture, the grain control lets you choose between a smooth look or a more organic, noisy appearance, and you can animate this texture with a speed setting to make the liquid feel more flowing and alive.
There’s also a preview mode so you can test the effect directly on the canvas without hovering. On top of that, you can enable hover effects to add a zoom animation, adjusting the scale and transition style for smooth interactions. Together, these settings make it easy to create an engaging, interactive hover effect that feels playful, organic, and fully customizable—all without writing code.
About the resource
The Liquid Mask Hover component in Framer lets you create a gooey, liquid-like effect that reveals an image when hovered. You can set a base image that’s always visible and a hover image that appears through the mask, with the option to adjust the card’s border radius for rounded corners. The gooey effect itself is highly customizable: you can control the size of the liquid area, use blur to make the edges softer or sharper, and adjust the boost to make the effect more or less intense. To add texture, the grain control lets you choose between a smooth look or a more organic, noisy appearance, and you can animate this texture with a speed setting to make the liquid feel more flowing and alive.
There’s also a preview mode so you can test the effect directly on the canvas without hovering. On top of that, you can enable hover effects to add a zoom animation, adjusting the scale and transition style for smooth interactions. Together, these settings make it easy to create an engaging, interactive hover effect that feels playful, organic, and fully customizable—all without writing code.
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.
