Image Rollover

This widget allows you to display a different image that is revealed when the site visitor hovers over an image. This is a great way to present an alternate view of an item, or additional information.

Additional features allow you to link the image and apply titles and captions that are shown on rollover. Styling options allow full control over fit and fill of the image, as well as a color overlay option to improve text readability when needed. This widget is easy to set up, and can be used anywhere you would use a standard image.

Demo: https://demo.wocode.com/image-rollover

Tutorial Videos

Setup

WIDGET PLACEMENT AND SIZING

  • Place the widget where you would like Image Rollover to appear. You may notice that the widget container is oddly sized when you first place it on the page, depending on where the widget is placed (within a new row, column, etc.).
  • Size the widget container: The first thing you will want to do is size the widget container appropriately.
  • Design > Container Settings > Width & Height: Use these settings to set the size of the image.

CONTENT SETTINGS

  • Unique ID: Set a unique ID for every widget when using multiples on the same page.
  • Original Image / Rollover Image: These image pickers let you select the image you would like to use for the original image and the rollover image. You may choose from an image by searching available stock images, or you may upload your own.
  • Image Link: Use this feature to set a link for the image.
  • Text Overlay Content and Settings: This submenu reveals three additional options:
    • Enable Text Overlay: As the title implies, this enables the overlay that shows title and caption text.
    • Overlay Title: This is the title text seen on hover.
    • Overlay Caption: This is the caption text seen on hover.
  • Transition Settings > Transition Duration: This setting determines the amount of time for the rollover image (and overlay) to transition into view.

DESIGN SETTINGS

  • Container Settings
    • Dimensions: As mentioned above, use the Height and Width options here to set the size of the image.
    • There are additional options in this section for Border and Rounded Corners.
  • Original Image Settings / Rollover Image Settings
    • Image Fitting: You may choose Fill (this mode fills the image container with your image, cropping as needed to fill) or Fit (this mode shows the image in its original aspect ratio, but may not match the image container, causing bars on the top/bottom or left/right)
    • Vertical Position: Allows for vertical alignment of the image within the container. Use this if you need to adjust to show the important featured portion of the image at the top, middle or bottom of the image.
    • Horizontal Position: Allows for horizontal alignment of the image within the container. Use this if you need to adjust to show the important featured portion of the image at the left, center or right of the image.
  • Overlay Styling
    • Background Color: This sets an overlay color that appears over the rollover image. Note that when selecting the color, you can also select opacity which can help make overlay text more readable. This color overlay is above the rollover image, but under the overlay text (in reference to “layers”).
    • Title Container Width: This setting allows you to set the width of the title text container. In most cases, this should be set to 100%. However, if  you would like to force the title text to wrap, you may decrease this value.
    • Title Container Padding: This applies padding to the left and right edges of the title text. Use this if the title text is too close to the edge of the image.
    • Title Text Style: Use these settings to style the title text (font, font size, font color, etc.)
    • The same settings listed above are available for Caption Text.

TIPS

  • When using multiple instances of the widget that will be displayed similarly, set up the first widget entirely (set image dimensions, style text, etc.), then copy/paste the widget as needed. For example: if you would like to use thrree image rollover widgets in a row, follow these steps to save some time:

1. Create a new row.
2. Add three columns to the row.
3. Place the Image Rollover widget in the first column, and set up completely.
4. Copy the widget.
5. Paste into remaining columns.
6. Set Unique IDs for the new widgets.
7. Change the original and rollover images, and the titles and captions. Text styling and other settings will be retained in the copied widgets.

  • When using title and caption text on your rollover overlays, consider using a Background Color on the overlay to improve readability of the text. Set the opacity to a low-end value like 25% so that the text can be read but the image is still visible.