# Bubble - Image Filters Plugin

### Overview

This plugin allows you to add 7 different filters/modifications to your images. Filters include:

* Sepia
* Brightness
* Contrast
* Color
* Grayscale
* Saturation
* Blur

You can either apply the effect to existing image elements using an element action, or use the "Image with Filter" element to add an image with a filter directly.

For a demo of this plugin please visit: <https://anticodeplugin.bubbleapps.io/imagefilter>

### Instructions

After installing this plugin you have access to two elements:

* Filter
* Go to Settings->General of your app and expose the option to add id attributes to html elements
* Drag the "Filter" element onto your page.
* Add an image to your page and enter an ID attribute in the element inspector of your image
* Trigger a filter effect within one of your workflows. You can choose one of the 7 filters and specify the strength of the effect. Enter the same element id that you used for the image you want to target in step 3.
* Image with Filter
* Drag the "Image with Filter" element onto your page. Upload an image or choose a dynamic image that should be used. Resize your element according to your requirements.
* Choose which filter should be applied using the dropdown in the element inspector.
* Specify the strength of the effect for the filter you choose. The values in the other field will be ignored.