Image Filters & Blend Modes


1. Instagram-type Filters for your Slide's Main Background Images

back to top
Filters can be added to a Slide's Main Background Image with the "data-mediafilter" attribute.
Cycle through the options with the arrows below for quick previews of the available filters.


2. Apply CSS3 Blend Modes to a Layer

back to top
Click the screenshot below to view a live example of the a Layer with a Blend Mode applied. The Blend Mode Hero premium template makes great use of the "overlay" option.
Blend Modes are applied to Layers as the "data-blendmode" attribute:

Blend Mode Options:
  • data-blendmode=”multiply
  • data-blendmode=”screen
  • data-blendmode=”overlay
  • data-blendmode=”darken
  • data-blendmode=”lighten
  • data-blendmode=”color-dodge
  • data-blendmode=”color-burn
  • data-blendmode=”hard-light
  • data-blendmode=”soft-light
  • data-blendmode=”difference
  • data-blendmode=”exclusion
  • data-blendmode=”hue
  • data-blendmode=”saturation
  • data-blendmode=”color
  • data-blendmode=”luminosity