Image Rollovers

03/13/2017
IMPORTANT NOTE – These Image Rollovers are different from the Image Hover Effect for regular images.

Image Rollovers are stylish overlays for your blog and portfolio images. They come with numerous customization options that allow you to control styling, visibility, actions and more. The Image Rollover options are located in Avada > Theme Options > Extra > Featured Image Rollover tab. You can also set some options individually under the Fusion Page Options in each blog or portfolio post. Continue reading below for more information on this element and its options.

Linked Areas Of The Image Rollover

  • Link Icon – The link icon will link to the single post page by default. However, you can add a custom URL for this icon in the Single Post’s Fusion Options.
  • Zoom Icon – Clicking this will open the image in the Avada lightbox by default. However, you can add a YouTube/Vimeo video URL in the Single Post’s Fusion Options. That will open the video in the lightbox instead of the featured image.
  • Post Title – The post title will link directly to the Single Post Page.
  • Post Categories – These will link to their respective category archive pages. Example of a Portfolio category archive.
  • Featured Image Rollover – The whole overlay which is generally colored is also a link to the Single Post Page. This refers to the green area which covers the image.

Image Rollover Fusion Theme Options

Located in the Avada > Theme Options > Extra > Featured Image Rollover tab. See our How Options Work article to learn more.

Image Rollover – Illustrated as A, this option lets you enable or disable Image Rollovers. Choose On or Off.

Image Rollover Direction – Illustrated as B, this option lets you set the rollover animation’s starting direction when activated. Choose between Fade, Left, Right, Bottom, Top, Center Horizontal, or Center Vertical.

Image Rollover Icon Font Size – Illustrated as C, this option accepts a pixel value that sets the icon’s font size. For example, 15px.

Image Rollover Link Icon – Illustrated as D, this option lets you show or hide the image rollover’s Link Icon. Choose On or Off.

Image Rollover Zoom Icon – Illustrated as E, this option lets you show or hide the image rollover’s Zoom Icon. Choose On or Off.

Image Rollover Title – Illustrated as F, this option lets you show or hide the title. Choose On or Off.

Image Rollover Categories – Illustrated as G, this option lets you show or hide the categories. Choose On or Off.

Image Rollover Icon Circle – Illustrated as H, this option lets you display the image rollover icons in a circular background. Choose On to display it in a circular background, or Off to display just the icons.

Image Rollover Gradient Top Color – Illustrated as I, this option accepts a hexcode value that sets the top gradient color.

Image Rollover Gradient Bottom Color – Illustrated as J, this option accepts a hexcode value that sets the bottom gradient color.

Image Rollover Element Color – Illustrated as K, this option sets the text and icon background colors.

Image Rollover Icon Color – Illustrated as L, this option sets the icon’s color.


Image Rollover Fusion Page Options

If you do not want the same global settings for each post, you can set them individually under the Fusion Page Options box in each blog or portfolio post. Navigate to the post you’d like to change, then locate the ‘Image Rollover Icons’ option in the Fusion Page Options > Post tab or the Fusion Page Options > Portfolio tab. You can choose which icons to display using this option. The Default value will pull whatever option is set in Fusion Theme Options. To override this, simply choose an option other than Default.


13 Likes
Proudly Serving Over 400000 Satisfied Users!