The Image Distort widget offers a unique way to display a pair of images. As the user hovers over the image, a secondary image transitions into view using eye-catching distortion effects. Caption text options include title, description, meta and a link.
- Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
- Current Version: 1.0
- Supported Devices: Desktop, Tablet, Phone
Setup in Muse
- Enable Meta / Title / Subtitle / Subtitle Link: These "Enable" options allow you to enable the various text caption content available. These are seen on top of the images.
- Meta: This text is seen at the uppermost part of the image.
- Title: This text is seen in the center of the image.
- Subtitle: This text is seen near the bottom of the image.
- Link: This is the text seen on the link. When entering a link, use the actual URL. Do not use an internal page name. Proper link structure is http://mysite.com/about. If you leave this field blank, be sure to enter "#" as the field cannot be empty.
- Link Label: This is the link text.
- Link Target: This allows you to open the link in the same window or a new window.
Most of the Content Styling options are self-explanatory. We will not cover each setting, as they are labeled with their exact purpose. However, there are a few key settings that should be mentioned:
- Content Padding: This setting applies padding to the left of the content. This padding is applied to all content. A smaller value will result in content being closer to the left side of the image.
- Padding Units: This setting allows you to adjust the units used for the padding. Each option has different attributes, which you can research if you like. We suggest using the default vw padding, as it is relative and is applied as a percentage. It is appropriate for responsive resizing.
- The remaining settings allow you to style each portion of caption text (meta, title, subtitle and link).
- Distortion Intensity: This setting changes the intensity of the transition distortion.
- Speed In: This changes the amount of time it takes to tranistion from image 1 to image 2.
- Speed Out: This changes the amount of time it takes to tranistion from image 2 to image 1.
No known issues or conflicts
Additional Info Links