EverWeb Event Photography
Capture your greatest moments
= Smythe-Jones
Image Link
Page Layout
The page layout consists of an RGL Row Hero Fixed header with the images set to full height (100 viewport units), two RGL Row Image Link widgets, a responsive text module widget, a Responsive Auto Footer and an RGL Row Logo Nav inserted last because it is set to fixed position to make it stick to the top of the page and appear above all the other items.
Animated Images
The RGL Row Image Links are featured here. Each widget contains two images which have an optional overlay and caption and can be configured as links to internal or external pages and open in a new window if required.
Images
The images in this example were cropped to 600px x 400px before importing into EverWeb. Each image has controls for entering alt text and the caption, to position the caption left or right and set its position on the x-axis and y-axis. Captions can return to two or more lines by using the return key.
An image is configured as a link by checking a box and choosing the "Link to:" page or checking a box for an external link and entering the UrL. There is a checkbox for opening either type in a new window.
Line
The optional line is created using a CSS pseudo element and inherits the font color. The line can appear above the caption when set as a ::before element and below when set as an ::after element.
Image Styles
The images can have a border with controls for setting the width and color. They can have an overlay which shows on hover when viewed on computers and on page load when viewed on mobile devices. There are seperate controls for setting the hover overlay and its opacity and the mobile overlay with a different opacity.
The images can have a scale on hover animation when viewed on computers. The scale is set using a slider with a range of 0 to 25. The highest value represents a scale value of 1.25.
Container
The container uses a CSS Grid layout which is centered and has a maximum width setting. There are controls for setting the top/bottom and left right padding and for the background color and its opacity.
The images are spaced horizontally using the column gap control and vertically using the row gap control.
The images can overlap the item above by setting a negative top margin using the control provided. There is a checkbox to set the background to transparent when overlap is used.
Animation
The slide up animation is turned on by checking a box. The animation occurs every time the item enters the viewport. There is a checkbox to make the animation only fire once.
By default, the animation does not occur when the page is viewed on mobile phones. There is a checkbox to turn it on if required.