![Image [1] Caption](ewExternalFiles/helb-1.jpg)
![Image [2] Caption](ewExternalFiles/helb-2.jpg)
![Image [3] Caption](ewExternalFiles/helb-3.jpg)
![Image [4] Caption](ewExternalFiles/helb-4.jpg)
![Image [5] Caption](ewExternalFiles/helb-5.jpg)
![Image [6] Caption](ewExternalFiles/helb-6.jpg)
Hero Lightbox Gallery
Animated Overlay
Images can be added to the thumbnail grid in rows of three. Each thumbnail has a slide down overlay on hover when viewed on computers and a fixed overlay when viewed on tablet devices. If viewing this page on a computer, reduce the browser width to see this change.
The overlay has a caption and an optional description and the background opacity is variable.
The thumbnail images should all be cropped to the same size for best results. The images used in this example are 400px x 300px to give good quality on retina screens. The image size can be reduced to 240px wide for maximum download speed.
The thumbnail images can have a border if required to give visual separation when the background opacity is reduced.
Responsive Width - Fixed Height
The main container is full width and, in this example has had its background opacity set to 0.33.
The thumbnail container is centered in the browser and has a setting for maximum width which, in this case, is set to 1200px.
Each thumbnail image is inserted in a fixed width HTML5 figure element which in turn is inserted into a responsive width wrapper.
The figure elements each contain a thumbnail image, a slide down overlay and a content section with h3 heading for the caption and a paragraph for the optional description.
This text is inserted using the Hero Text widget.
Lightbox Slideshow
The responsive lightbox slideshow has "previous" and "next" arrows for navigation on computers. These disappear on tablets to be replaced by swipe navigation.
There is an "X" for closing the lightbox but clicking or tapping anywhere on the background will do it too. There is an optional slide counter and slide up animated image captions.
Note that the large images are responsive up to the maximum width of the actual image file. An image file width of around 1200px is ample for reasonable quality and performance.
If lightbox images are required without the slideshow, use the Hero Image Lightbox widget.
Parallax Scrolling
The page background is inserted using the Hero Parallax Background widget. The background scrolls at a slower speed than the foreground objects to give a sense of depth to the layout.