EverWeb Widgets

Image Rotate

The rotation is through 369°. The number of rotations can be set from 1 through 5 or to infinite. The rotation can be set to forward, reverse or alternate.
Images
The images in the example were cropped to size and optimised before importing into EverWeb.
The image sizes are 1200 x 720px (150KB), 720 x 480px (68KB) for mobile devices.
The image can have a border and/or a box shadow.
Caption & Link
The caption is below the image and there is a control for adjusting its position on the Y-axis. The link can open internal or external pages and has a new window option.
The link can be denoted with an icon which can appear on hover when viewed on computers.
Container
The container can have a two color gradient background with adjustable angle.
As the image rotates it can break out of the container. To prevent this the container has controls for top, left/right and bottom padding. These are set in vw units (viewport width) so that they are responsive.

ThemeKit Rotate In Image
Image Rotate In

Image Rotate In

The ThemeKit Image Rotate In widget can add an unusual touch to a web page layout. The image uses the CSS perspective property and rotation on the X and the Z-axis to create the on page load state. It then animates up by changing the X and the Z rotation to zero.
There is a checkbox to change the on load rotation angle from the left to the right.
Space
Since it is rotating on the Z-axis the image will tend to break out of its container. There is a control to reduce its scale and to set top/bottom and left/right padding. The padding is set in vw (viewpoert width) units so that it acts responsively.
Caption & Link
The caption can be aligned left, center or right and moved up from the bottom of the image.
The image can be a link denoted by a link icon at the top right.
The caption and iocn can appear on hover when viewed on computers.
Image
The image in the demo inserted in two sizes - 1200 x 800px and 720 x 480px - for faster loading on mobile devices.
The image can have a border and/or a box shadow. The box shadow is all around the image before the animation and switches to a bottom box shadow when rotated upright.