The first thing you'll want to do when you have your pages all set up and ready to go is create two images.
They can be any size you want, any dimensions, but if you want everything to look smooth and seamless when hovering your mouse over an image, please take special care to ensure both images are the exact same size and resolution.
This way when you hover over, it only changes the image and does not distort or adjust the rest of the page elements from their current positions.
For each image you will need to add them to your page, right on top of each other.
Respectively, add these CSS TITLES through the image settings by clicking on the "#" icon.
The MAIN IMAGE CSS TITLE: cf-hover-pair-main-1
The PARTNER IMAGE CSS TITLE: cf-hover-pair-partner-1
If you have more than 1 pair of images on your funnel step, you would simply change the -1 to -2, -3, -4, etc for each pair of swappable images you create on-page.
Congrats, you are now ready to create and install the add-on script using CF Pro Tools!
Step 4: Create The Add-on Script
For most add-on installations of the ORDER SUMMARY script, you can simply click the CREATE NEW button:
... and do a keyword search for HOVER PAIR
Once you have located the Hover Pair Add-on script, click the thumbnail image and create the add-on per the installation instructions.
As there is no configuration for this add-on script, you only need to click CREATE ADD ON button at the bottom of the page.
Step 5: Install The Add-on Script
Ok, great! Now you've created the script, now it's time to copy the script into your Footer Tracking Code Area on your ClickFunnels Funnel Step.
Click the BLUE Button below your script to copy the code onto your virtual clipboard.
You are now ready to paste the script to your Footer Tracking Code area on your funnel step.
Please make sure to click on the FOOTER CODE tab, and paste your script to this area shown below:
You can now save your page and click PREVIEW or view the LIVE page to test your new add-on script in action!
No known conflicts at this time.
What To Do Next:
Here Are A Few Other Help Docs You May Wish To Check Out: