Adding Image Effects

Image Effects let you style your images using visual filters to add a unique look to your website. You have plenty of Image Effects to choose from to visually change the look of your images. Image Effects are available for images in the Image Widget, Image Gallery Widget, Categories Widgets, Slider Widget, Blank Product List Widget, Decorated Product Listing Widget, Design Listing Widget, Logos Widget and Social Widgets.

You can add image effects for the normal state of an image (when the mouse pointer is not hovering over the image) and for the hover state (when the mouse pointer is hovering over the image) by clicking on the relevant Edit link in the widget's settings.

For instructions on how to access the Image Effects Edit link of a particular widget, read the respective help article for the Widget.

The Edit link brings up the Edit Image Effects popup. There are two types of effects available - Filter Effects and Transform Effects. When you select the Edit link for Hover Image Effects, additional Hover Animation settings are available.

Edit Image Effects Popup for Normal Image Effects

Edit Image Effects Popup for Hover Image Effects

To add Filter Effects

The Filter Effects allow you to adjust image pixels, colors, and tones.

1. In the Edit Image Effects popup, click on the Add Filter Effect link.

   The Add Image Effect popup is displayed.

   
2. Select an effect.
   • blur: reduces noise and detail in the entire image.
   • brightness: adjusts the brightness of the image.
   • contrast: adjust the level of highlights and shadows in the image.
   • grayscale: converts the image colors to various gray tones between black and white.
   • hue-rotate: lets you shift the colors in the image according to the color wheel. A color wheel is a visual representation of colors arranged from red to violet around a circle. You specify the angle around the color wheel to determine the output colors that the original image colors will be adjusted to.
   • invert: changes the colors of the entire image to the scientific complements of the original colors.
   • opacity: adjusts the transparency level of the entire image.
   • saturate: adjusts the intensity of color in the entire image.
   • sepia: converts the image to a yellow-toned black and white image.
   • vignette: darkens the edges around the image, making the center of the image appear brighter.

   The selected effect will be added to the Filter Effects list.

   
3. Configure the settings for the Effect.

   blur

   

   Specify the number of pixels (between 0 and 10) in the image that will blend into each other. A larger value will create more blur.

   brightness

   
   

   Specify a percentage value (between 0 and 1000) to set the brightness. 0% will make the image completely black. 100% represents the original image. Values over 100% will provide brighter results.

   contrast

   
   

   Specify a percentage value (between 0 and 1000) to set the contrast. 0% will make the image completely black. 100% represents the original image. Values over 100% will provide results with less contrast.

   grayscale

   
   

   Specify a percentage value (between 0 and 100) to set how much grayscale conversion is applied to the image. 0% will leave the image unchanged. 100% will make the image completely grayscale.

   hue-rotate

   
   

   Specify an angle value (between 0 and 360) to determine the number of degrees around the color wheel the original colors will be adjusted to. 0 degrees will leave the image unchanged.

   invert

   
   

   Specify a percentage value (between 0 and 100) to set the proportion of the image to be inverted. 0% will leave the image unchanged. 100% will completely invert the image.

   opacity

   
   

   Specify a percentage value (between 0 and 100) to set the transparency level of the image. 0% will make the image completely transparent. 100% will leave the image unchanged (i.e. no transparency).

   saturate

   
   

   Specify a percentage value (between 0 and 100) to set the proportion of the image to be saturated. 0% will make the image completely un-saturated. 100% will leave the image unchanged.

   sepia

   
   

   Specify a percentage value (between 0 and 100) to set how much sepia conversion is applied to the image. 0% will leave the image unchanged. 100% will make the image completely sepia.

   vignette

   
   

   Specify a percentage value (between 0 and 100) to set the size of the vignette effect. 0% will leave the image unchanged. 100% will produce the largest vignette.

4. Click OK.

   You can continue to add as many effects as you want.

To add Transform Effects

The Transform Effects allow you to visually manipulate images by scaling, rotating, translating, or skewing.

1. In the Edit Image Effects popup, click on the Add Transform Effect link.

   The Add Image Effect popup is displayed.

   
2. Select an effect.
   • scale: adjusts the size of the image.
   • rotate: rotates the image clockwise from its current position.
   • translateX: moves the image sideways from its current position.
   • translateY: moves the image up or down from its current position.
   • skewX: tilts the image left or right by a given angle.
   • skewY: tilts the image up or down by a given angle.

   The selected effect will be added to the Filter Effects list.

   
3. Configure the settings for the Effect.

   scale

   
   

   Specify a percentage value (between 0 and 1000) to set the size of the image. 100% will leave the image unchanged.

   rotate

   
   

   Specify an angle (between 0 and 360) to rotate the image. 0 degrees will leave the image in its original orientation.

   translateX

   
   

   Specify a pixel value (between -500 and 500) to move the image left or right. 0 degrees will leave the image in its original position.

   translateX

   
   

   Specify a pixel value (between -500 and 500) to move the image up or down. 0 degrees will leave the image in its original position.

   skewX

   
   

   Specify a pixel value (between -90 and 90) to skew the image along the X-axis. 0 degrees will leave the image in its original form.

   skewX

   
   

   Specify a pixel value (between -90 and 90) to skew the image along the Y-axis. 0 degrees will leave the image in its original form.

4. Click OK.

   You can add as many effects as you want.

To remove an Image Effect

1. In the Edit Image Effects popup, click on the delete icon beside the filter you want to remove.
   
2. Click OK.

To configure Hover Animation settings

1. Click on the Edit link for Hover Image Effects.
   
2. Configure the Hover Animation settings in the Edit Image Effects popup.
   
   • Duration: lets you specify the duration, in seconds, over which the animation will occur. Use the slider or enter a value between 0 and 9999.
   • Delay: lets you specify a time delay, in milliseconds, before which the animation will start. Use the slider or enter a value between 0 and 9999.
3. Click OK.