Image Distort

https://www.muse-themes.com/products/image-distort

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

Release Log

  • 1.0: Initial release


 



Setup in Muse

  • Place the widget where you would like the image to appear on your site.

  • Size the widget container to the preferred size.

  • Open the widget option panel.
  • Image 1 / Image 2: These images are the images you will see before and after the transition. Click the link for each to load images.

    It is best to prep all images so that they are the same size and aspect ratio

  • Displacement Image: This image is shown briefly as image 1 transitions to image 2. Our widget download comes with several images that are ideal for this (see the Displacement Images folder in the download package). You may use any image for this, but keep in mind that high contrast images will be ideal.

CONTENT SETTINGS

  • 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.

CONTENT STYLING 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).

TRANSITION SETTINGS

  • 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.


Known Issues/Conflicts

No known issues or conflicts


Additional Info Links