Image Caption
On more than …
… two Lines

Full Width Fixed Height Cross Fade Animation


The animation is created by placing one image on top of the other and using a CSS transition animation to change the opacity of the top image over time.
The overall time of the animation can be adjiusted as well as the iteration count. The iteration count can also be set to infinity.

Full Width Cross Fade Image Widget
Full Width Cross Fade Image

Fixed Position

The position of the animated images can be fixed so that they are staionary as the rest of the content is scrolled over it. This is achieved in the demo by inserting the Full Width Rectangle widget as a background to the remaining content. This covers the images as the page is scrolled.


The images should be about 2000px wide and the about the same height as they will appear on the page.
The images used in this demo are 2000px wide by 600px in height.

Widget Settings

Check the "Full width" box in the Metrics inspector.
Select the images and adjust the height using a drag handle or the Metrics inspector.
Enter the caption text and use <br> for line brreaks if required.
Choose the font and set its size and color.
Set the text align, line height and the top/bottom and left/right padding.
Set the background color and its opacity.
Radius the corners and then adjust the value for "Distance Top" to move the caption downwards.

The animation time is the time taken for the transition animation to complete one cycle. The time is in seconds.
The iteration count is the number of times the cycle will be repeated.
Check the box to set this to infinity.

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width