Link Media Reveal

An Interactive UI Pattern for links that displays a hover-over preview of an Image or Video using smooth animations.

Content Tab

Content

• Text: The link Text
• Link: The link for the text
• Tag: Wraps the link inside the given HTML tag

Media

• Media: The image or video shown on hover

Reveal Effect

• Style: The effect used to reveal the chosen media

Move Effects

Note: These effects are optionally applied on mouse move and touch move when the media is visible.

• Apply Squeeze: Applies scale effect
• Apply Tilt: Applies a slight rotational effect

Design Tab

Media

• Width: The width of the media container
• Height: The height of the media container
• Align Center: Align the media container to the center relative to the mouse position
• Border Radius: Applies a border radius to the media container

Link

• Full Width: The link container takes the full width of it’s parent container