Floating Link Images

This unique widget displays an image as you hover over a link. Interactive elements, such asfluid brightnessandsmooth cursor followare applied to the image in order to create a “floating” effect. Number ordering and custom description text can also be enabled to further enhance links.
Consider using this widget to display product images, show pictures of team members, highlight certain words or phrases in an blog post, or use as image-based tooltips!

Preview: https://demo.wocode.com/floating-link-images

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

This widget utilizes a list format to display text. The floating images are applied to the text within this list. You may use the list format, or place separate instances of single lines of text placed where you like throughout a page. Be sure to check out our demo to see several different examples of usage.

  • Drop the widget into your site and place it where you would like the widget to appear on your page layout. You will see a single line of text to begin with.
  • Open the widget option panel.
    • Unique ID: Be sure to use unique IDs when using multiple instances of the widget on the same page.
    • Links and Images: This is where you will build your list containing text content and images.
    • List Items: Within each list item, you will find several options:
      • Image: Use this image loader to load your floating image. Choose from our massive library of images or upload your own.
      • Title: This is the main list item text. Note that this text does not have to be a link. Links are enabled later in this section.
      • Subtitle: The subtitle is displayed below the title when the user hovers over the title text. Leave this field empty if you choose not to display a subtitle.
      • Link URL: Enter your link URL here.
      • Link Target: Use this option to allow the link to be opened in the same window or a new window.
    • Display Item Number: You may display a number next to the title if you choose. This toggle enables/disables the option. The number will appear when the user hovers over the title, similar to the subtitle.

DESIGN SETTINGS

There are numerous options that allow you to style various elements of the widget, including fonts, colors, list container and image attributes. The settings are labeled with their exact function, and will not be explained in detail, as they are self-explanatory. However, we will discuss a few key settings:

  • Container Styling section: This section allows you to style the widget container. Consider using these styling options if you would like to display text in a button format or add elements such as background fill or border.
  • Content Styling Section: There are some important settings in this section. This is where you will select fonts, colors and image attributes.
  • Image Dimensions: Use these width/height settings to control the shape and size of the floating images.

TIPS AND NOTES

  • Image Dimensions: It is very important to utilize the image dimensions to maintain total control of both the shape and size of the images. Also note that these settings control the aspect ratio of the images. For example, the default settings are 300px width by 400px height. This will result in a portrait style aspect ratio. Even if your image has a landscape style layout, it will be displayed in a portrait aspect because of the dimensions in the widget. Utilize the image dimensions to fine tune the image.
  • Known Issue – Display Item Number Toggle: At the time of writing, there is a known issue with the toggle input that interferes with some Design settings. This issue is not a widget bug, but instead an issue with the widget input types in general. You may see this issue result in certain Design settings disappearing when the Display Item Number toggle (in the Content section) is toggled to OFF. If you encounter this issue, simply toggle the Display Item Number to on, then make your Design setting selections. The toggle the Display Item Number back to off.