Clipped Image

The image is inserted in a rectangular container and has its top and bottom edges clipped using the CSS "clip-path" selector.
The angles of the top and bottom edges are adjusted using sliders. The amount of clip varies from zero to 50 on the top and 50 to 100 on the bottom.
Setting both sliders to their maximum will create a triangle and setting both to zero creates a rectangle.
Images
The images are inserted in two sizes - one for wider screens and the other for mobile devices. The images used here were cropped to 1200px and 800px wide respectively before importing into EverWeb.
The break point at which the images change from on size to the other can be set to occur on tablets in landscape, tablets in portrait, phones in landscape and phones in portrait mode.
The images are insert using the HTML5 <picture> element so there is an alt text attribute for entering keywords for the search engines.
Caption
The image is inserted in an HTML5 <figure> to allow it to have a caption using the <figcaption> tag. Using a figcaption makes sure that the search engines relate the text in the caption to the image.
The caption can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size and color.
Caption Position
The caption can be positioned horizontally using the options for left, center and right. Since this is a CSS Grid layout, the caption can also be vertically aligned using the options for start, center and end.
The position can be fine tuned using the values for top/bottom and left/right padding.
Container
The container has a vertical spacing control for adjusting the spacing from the items above and below and adjustable background color.
Slideshow
The same effect can be applied to a slideshow. Follow the link below to see a lazy loading slider with captions and link options …