EverWeb Widgets

Rotate Images

Image Angles

The first row with three images has controls to set the individual angles. The second example with four images has controls for setting the angle of the odd and even images in the row,
Images
The images are inserted in a <figure> element with alt text for the search engines. The caption is inserted in a <figcaption> element which is absolutely positioned to overlay the bottom of the image.
The <figure> can have a border if required.
NOTE: The greater the angle of rotation - the wider the column gap needs to be to stop the images in the first row from overlapping below the break point.
Break Point
At the first break point - which is user selectable - the number of columns is reduced to 2 and image 3 is moved to the second row width its rotation angle set to zero.
The next break point is preset for mobile phones in portrait mode. The number of columns is reduced to 1 and the images are stacked with zero rotation.
Captions
The optional captions can be styled for font size, color and background color and its opacity. They can appear on page load or on hover when viewed on computers.
Links
The images can be configured as hyperlinks to open internal or external pages with a new window option. The info icon can be turned on to indicate that the image is a link. It can be styled for icon color, hover color and background color and its opacity.
Link the captions, the icons can be set to appear on hover when viewed on computers.

EverWeb Widgets
All Rights Reserved
© EverWeb Widgets -