Unit 4: Styling your website

4.4 Adding hover effects to images

Adding hover effects to images

Hover effects are a way of adding interactive design features to your website to make it more appealing for your customers. The feature is also a simple way of adding dynamic design that makes your website look more professional.

Hovers

Where to use hover effects

The hover effect features can be used on five different modules:

  • Image module
  • Gallery module
  • Image list module
  • Blog catalog module
  • Catalog module, E-commerce (coming soon)

You enable hover effects for each module under the Settings tab of the module. 

Hovers

Activate hover effects

Hover mode must be toggled on in the Settings menu of the individual module before any of the styling will appear in the Editor, preview or upon publication. When hover mode is enabled, you will have the following options:

  • None: this type is only showing a background and/or border on top of the image.
  • Icon: this type is also showing an icon that you've defined on top of the background/border.
  • Caption text: this type is also showing a caption text on top of the background/border.

Hover effects can be styled globally from Global Design > Base elements > Image hover, or locally on individual modules by navigating to the Design menu and locating the Image hover parameter.