Image Hover Add-on
for Fusion Builder
16.12.2019
─
InfiWebs
J2-107, Tanish Srushti,
Alandi, Pune, 412105
1
Overview
Image Hover Add-on for Fusion Builder provides 200+ hover styles to use on
your images. You can apply multiple styles on different pages to make them
look more and more beautiful.
We’ve categorized the effects for you. You can choose effects from 35+
different categories.
Specifications
The Image Hover Add-on plugin is an add-on for Fusion Builder Page Builder
that came free the Avada theme. In order to get this plugin working, you
need to meet the following minimum requirements -
● WordPress - 4.5
● PHP - 7.0 and above
● Avada - 6.0 and above
● Fusion Builder - 2.0 and above
2
Installation
1. Download the “Installable WordPress File” from the downloads dropdown on
Codecanyon Downloads page - https://codecanyon.net/downloads
2. Go to your WordPress admin -> Plugins -> Add New plugin page and click on
the “Upload” button near the “Add Plugins” page title.
3. Click on the “Choose File” button and select the downloaded plugin from
Codecanyon. Once the file is selected, click on the “Install Now” button to
install the plugin
4. Once the plugin is installed, click on the “Activate Plugin” link to activate it.
5. Now, go to Fusion Builder -> Settings and see if the element “Image Hover
Add-on” is listed and is checked.
3
Using Image Hover Element
Please follow these instructions in order to add the Image Hover Add-on to
your website and make use of the 200+ Hover effects.
● Create a new page or edit the existing page on your website. You can choose
any version of the builder ( Backend or Frontend ). We prefer you to use the
Frontend version so you can see the live preview of each hover effect.
● Click on the “Add Element” button in the Fusion Builder column.
● From the Elements popup, search for the Image Hover Add-on and click on it
to insert it into the page.
4
● Once you’ve added the element to the page, you can now begin customizing
the settings. The initial preview will look like this -
5
Introduction to the settings
Once you see the initial preview in the frontend builder, you can see the
element options on the right-side panel. Let’s see what each option is and how
we can use them.
General Settings
● Hover Style
Select the hover style you want to apply. There are more than 200 hover
styles available to choose from. You can see the live preview in the live
editor.
● Image
The first image option adds an image to be displayed on all devices. You can
also add a retina image with a higher resolution for retina devices.
● Retina Image
Retina image preview will only available if you're on the retina device.
● Background Color
You can control the hover content background color with this option. You can
choose different background colors for each of the image hover elements on
your page to make them look even more beautiful.
● Image Width
Select the css width for the image. Height will change in the proportion of the
width automatically. The image width is in pixel.
● Link URL
You can add a link to your images along with the hover effect. You can select
any internal page using the link selector or enter your external url.
6
● Elements Visibility
Choose to show or hide the element on small, medium or large screens. You
can choose more than one at a time. Each of the 3 sizes has a custom width
setting on the Fusion Builder Elements tab in the Theme Options.
● CSS Class
Enter your css class name here to style the output as per your requirements
on the frontend.
● CSS ID
Enter the CSS ID here that will help you link this image location from
anywhere on the same page or from an external page.
That’s it for the general tab settings. Let’s take a look at the next settings tab.
7
Title Tab
Options in the title tab apply to the title text on the hover content.
● Title Text
This option controls the text being displayed as a title on the hover content.
You can keep it or remove the title entirely from the output; just keep the
field empty and the title will be removed.
● Title Tag
You can control your title tag from here. For SEO purposes, we have added
an option for you to choose the title tag being used for this image hover
content title.
● Title Font Size
When it comes to the text, the customization opportunities shouldn’t be
limited. We have added an option for you to choose the title font size to
make it look better when the image hover content is displayed.
● Title Color
Control the title text color from here. Since the image hover content also has
a background color, you need to choose the text color, in contrast, to make
the text look clear and readable.
Let’s take a look at the final settings tab.
8
Description Tab
Similarly to the title tab, the description tab controls the options for the
description text on the image hover content.
● Description Text
Control the text being displayed for the image description on hover content.
You can describe your image here. If you don’t need the description text,
simply keep the field empty and the description text will be removed from
the output on the frontend.
● Description Font Size
Controls the description text font size. By default, the font-size is inherited
from your theme settings.
● Description Color
Similarly to the title option, since the image hover content has a background
color, you need to choose a different description text color to make the text
appear clear and readable.
That’s all. You can customize each part of the image hover element output. In
case if any option is missing or you have a great idea, please feel free to submit
a support ticket with your ideas and we will get them implemented.
9
Plugin Support
If you have a valid license for the plugin, you can get the support from our
support site here - https://infiwebs.freshdesk.com/
In case you are having issues with the support system. You can simply mail us
your queries at - [email protected] with your license key and we will surely
look into it for you.
