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
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.