Porto Heading includes built-in visual effects that help draw attention to important text. These effects allow you to enhance headings with interactive and animated highlights without using custom code.
The following effects are available:
- Hover Image Floating
- Highlight Animation
Hover Image Floating
What Is Hover Image Floating?
Hover Image Floating displays an image inside the heading area when hovered and hides it when the cursor leaves. This effect is ideal for adding subtle visual interaction to key headings.
Options
- Floating Image - Select the image that appears when the heading is hovered.
- Floating Offset - Adjust the horizontal and vertical position of the floating image. Values are defined in pixels (px).
Highlight Animation
What Is Highlight Animation?
Highlight Animation emphasizes specific words or phrases inside a heading by animating a background highlight. To apply this effect, the highlighted text must be wrapped using the HTML
<mark>
tag.
Options
- Background Type- Choose the highlight background style between classic and Gradient
- Height - Control the vertical thickness of the highlight background.
- Vertical / Horizontal Position - Adjust the position of the highlight background relative to the text.
Usage Notes
- Hover Image Floating works only on mouse interaction
- Highlight Animation requires the
<mark>HTML element inside the heading text - Both effects can be combined with other heading typography settings
