I’m trying to add some colour effects behind images or randomly on a page, similar to the example below (source: Textus).
I managed to recreate the effect by adding a couple of divs as circles inside a parent div, applying some move and scale animations, and then blurring the parent div.
However, when I copy the parent div and place it under another image in a different container, it doesn’t work, the animation only seems to apply to the original instance.
My goal is to create a reusable component so I can easily apply this effect to any image, or even add it randomly across the page. Ideally, I’d like to be able to attach it as a class to a div that’s relative to an image, video, or plain section.
I’d really appreciate your advice on the best way to achieve this.
Webflow’s backdrop filters can be combined with animations to create dynamic effects on transparent areas. You can implement this by:
The backdrop filter options include blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia. These can be found in the Style panel under the Effects section. To create animated effects, you can add these filters to your elements and then use Webflow’s animation features to transition between different filter states.
To make these components reusable, you can save them as symbols or use them as classes that can be applied to multiple elements across your site. This allows you to maintain consistency while having the flexibility to adjust the animations and effects as needed.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
