Animated In/Out Image Overlay

The image is inserted with a maximum width setting which should be the same as the image file width. It can have a border and/or box shadow. When a box shadow is displayed, the image width is automatically reduced to 98% and the vertical spacing should be set to at least the same value as the shadow radius.
The overlay has controls for background color and opacity. It has a caption and the option for a CTA style link. The link can be configured to open an internal or external page and in a new window if required.
Animation Settings
The overlay has a fade in animation with settings for animation delay and time.
The heading and the CTA link can have a different transition type, delay and time.
The animations occur every time the item is scrolled into the viewport. This means that it will fire when the visitor scrolls down the page past it and again on scrolling up.
There is a checkbox which forces the animation to only fire once if required.
By default, there is no animation when the page is viewed on a mobile phone. This can be overruled by checking a box in the widget settings.