EverWeb Widgets

EverWeb

Creative

Design

Widgets

Marketing Image Overlap Links

Grid Item Position

The images are inserted in HTML5 <figure> elements. and the text in paragraphs. The images and text are positioned in the grid using the grid-row and grid column properties with a value for the start and span. For example …
figure:nth-child(1) {grid-row:1/span 4;grid-column:1/span 4}
p:nth-of-type(1) {grid-row:2/span 1;grid-column:5/span 2}
The images overlap from top left to bottom right. This can be changed by applying a z-index to images [1] and [2] to bring them to the front.
The center image can overlap both the top and bottom image by bringing it to the front.
NOTE: that the z-index is applied using checkboxes and NOT the EverWeb Arrange menu.

Images

The images should all have the same aspect ration and be cropped to size before importing into EverWeb. A suitable width would be 600px t0 800px wide depending on the maximum width setting applied to the grid.
The images have alt text for the search engines and can be configured as internal links if required. They can have a border if required using the controls for border width and color.

Animation

The fade in animation is optional and turned on by checking a box and setting the animation time and delay for each image. The paragraph elements share the same time and delay.