Section where image expands to width during scroll

Show details...

Syntax

{{< section-image-expand-to-width-on-scroll
heading-background-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
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,em,rem 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, 1em, 0.8rem, 100vh or 50%"
heading-bottom-position="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-left-position="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-line-height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh or 50%"
heading-padding="Top, right, bottom, left property in px,em,rem 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, 1em, 0.8rem, 100vh or 50%"
heading-size="Any valid number with unit like 10px, 1em, 0.8rem, 100vh 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, 1em, 0.8rem, 100vh or 50%"
height="Any valid number with unit like 10px, 1em, 0.8rem, 100vh 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,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
padding="Top, right, bottom, left property in px,em,rem 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 >}}

Samples