Floating Link Images

https://www.muse-themes.com/products/floating-link-images

This unique widget displays an image as you hover over a link. A "floating" effect is achieved using several interactive functions such as cursor follow and motion easing.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop

Release Log

  • 1.0: Initial release




Setup in Muse

This widget links to text on your site by using Paragraph Styles applied to the text. This means that the functionality can be applied to old existing text already on your site or any newly added text. The widget can be placed out of the way and applied to many instances of text on your page.

  • Place the widget out of the way off canvas.
  • The text that the widget connects to can be positioned anywhere on the page you like, or can be text already in place.

WIDGET OPTIONS

  • Open the widget option panel.
  • Paragraph Style: Enter the paragraph style in this field. See the "Working with Paragraph Styles" section below for more information.
  • Image: Load the image you would like to display when hovering.
  • Image Width and Height: This allows you to set the image size and shape. Note that these controls override the shape of the original image. For example, with the default values of 300px width by 400px height, the image will display in a portrait type aspect ratio even if your original image has a landscape aspect ratio.
  • Paragraph 2/3/4/5/6/7/8/9/10 Settings Sections: Each of these sections have settings identical to those discussed above, with the exception of an enable checkbox. The enable chackbox turns on that paragraph style / image combination.

WORKING WITH PARAGRAPH STYLES
The heart of the functionality of this widget is the connection between Paragraph Styles applied to text on your page; and the widget. We'll discuss some details that will allow you to make best use of the widget.

  • For text that you would like to add the Floating Link Image functionality to, apply a paragraph style to it.
  • You may apply this widget to any text you like; as long as it has a paragraph style applied to it. It does not have to be used only on links.
  • For each text that has a different floating image, you will need to use a different paragraph style.
  • If you use the same paragraph style for several titles throughout the page, all of those titles will have the floating image applied.
  • In most cases, it will be best using many different paragraph styles in order to utilize different images for the different titles.

USING MULTIPLE INSTANCES OF THE WIDGET
You may be tempted to use multiple instances of the widget for multiple different titles or instances throughout a page. While that is possible, we suggest using a single widget when possible. Instead of having just one input for a paragraph style in the widget, we included 10. This means that you can use a single widget for 10 different instances.

When multiple instances of the widget are used, the javascript library is loaded multiple times. So it is best practice to limit instance usage by using all of the available opportunities within one widget before adding another.



Known Issues/Conflicts

No known issues or conflicts


Additional Info Links