Section where image expands to width during scroll

Use this section to bring some zing on your pages. The moment the image scrolls into view, it would increase in width and catch attention.

Show Full Syntax...

Syntax

{{< section-image-expand-to-width-on-scroll
heading-background-color="any background or gradient"
heading-border-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-border-radius="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
heading-border-width="Any valid number with unit like 10px or 10rem"
heading-bottom-position="Any valid number with unit like 10px or 50%"
heading-left-position="Any valid number with unit like 10px or 50%"
heading-line-height="Any valid number with unit like 10px, 10rem or 50%"
heading-padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
heading-right-position="Any valid number with unit like 10px or 50%"
heading-size="Any valid number with unit like 10px, 10rem or 50%"
heading-text="Any text"
heading-text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
heading-top-position="Any valid number with unit like 10px or 50%"
height="Any valid number with unit like 10px, 100vh, 10rem or 50%"
image="Any valid image link"
is-full-width="true|false"
is-open-in-new="true|false"
link="Any valid http link"
margin="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on." >}}

The actual message goes here

{{< /section-image-expand-to-width-on-scroll >}}