FAIR

Federated and Independent Repositories

Filteralia image style filters mixer

Plugin Banner

Filteralia image style filters mixer

by Tommaso G. Scibilia

Download
Description

Filteralia image style filters mixer, seamlessly extends the native WordPress Image block by injecting an advanced CSS filter customization panel into the Styles sidebar tab.

Designed specifically for the Site Editor (FSE) and modern block themes, this lightweight plugin operates completely vanilla without any external build-tools, compilation, or tracking. It empowers creators to mix all standard CSS filters in real-time and define how they interact with users.

Key Features

  • Full CSS Filter Suite: Fine-tune Blur, Brightness, Contrast, Grayscale, Hue-Rotate, Invert, Opacity, Saturate, and Sepia directly inside Gutenberg.
  • Three Interaction Behaviors: Choose between Static Filters (always active), Entrance Dynamic Filters (apply on hover), or Exit Dynamic Filters (remove on hover).
  • Smooth Transitions: Custom transition slider to control the fade speed of your hover effects.
  • 100% Native & Clean Code: Integrates perfectly with core block attributes using WordPress Hooks API.
  1. Upload the filteralia-image-style-filters-mixer folder to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Open any Page, Post, or Template inside the Site Editor.
  4. Add or select an Image block, navigate to the Styles tab on the right sidebar, and open the “Filteralia CSS Mixer” panel.
  1. Image processed with a mix of filters from the Styles tab of the Image block of the FSE editor.

    Image processed with a mix of filters from the Styles tab of the Image block of the FSE editor.

  2. Image processed with a mix of filters from the Styles tab of the Image block of the FSE editor.

    Image processed with a mix of filters from the Styles tab of the Image block of the FSE editor.

  3. Image processed with a mix of filters from the Styles tab of the Image block of the FSE editor.

    Image processed with a mix of filters from the Styles tab of the Image block of the FSE editor.

  4. Image processed with a mix of filters from the Styles tab of the Image block of the FSE editor.

    Image processed with a mix of filters from the Styles tab of the Image block of the FSE editor.

Does this plugin duplicate images or create new files?

No. It uses 100% pure inline CSS variables and attributes applied directly to the native HTML image markup, keeping your database and media library clean.

Will it slow down my website rendering?

Not at all. The calculations are processed instantly by the user’s browser using native hardware-accelerated CSS graphics engines.

= 1.0.1
* No substantial changes. Just a few comments added to the code.

1.0.0

  • Initial official release.
  • Added full CSS filter sliders support.
  • Added static, entrance, and exit transition options.
Back to top