{"title":"Adding CSS Filters","id":51986,"link":"https:\/\/env.averta.net\/en\/step\/adding-css-filters\/","parent":[51848],"content":"<p>You can add CSS Filters to the slides. Master Slider applies these filters to the slides based on their position in the slider. To define a CSS filter, you need to create an object containing the filters properties. In the following you can find an example:<\/p>\n<pre class=\"lang:xhtml decode:true \">&lt;pre&gt;\r\n  var slider = new MasterSlider();\r\n  slider.setup( 'headerSlider', {\r\n    width: 900,\r\n    height: 700,\r\n    filters: {\r\n      grayscale: 1,\r\n      opacity: 0.5,\r\n      brightness: 2\r\n    }\r\n  });\r\n&lt;\/pre&gt;<\/pre>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>For more information about CSS filters take a look at <a href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/CSS\/filter\" target=\"_blank\" rel=\"noopener\">this page<\/a>.<\/p>\n<h2>filterTarget option<\/h2>\n<p>This slider options specify the target element in the slides for applying the filters. Possible values: <code>'slide'<\/code> and <code>'slide-background'<\/code> or any slide scoped CSS selector.<\/p>\n<p class=\"aswi-text-box box-Note\"><strong>Note: <\/strong>Since this feature is recently added to CSS, it is not available in all browser, particularly old IE versions.<\/p>\n","type":"solution"}