The sections below refer to the 3 tabs of the block. Please also refer to the Live Demo.

Image size

The size of the gallery is set by the first overlay image (or the underlying image). If the subsequent overlay images are much smaller than the first image, you may notice some empty space. For best result, it is advisable to use all images with same dimension.

Underlying Image

This is the image that gets displayed when the gallery loads. If you do not use this, the first overlay image will be shown when the gallery loads.

Underlying image is optional. You may leave both fields blank. However if you have entered a caption, an image must also be selected.

 

Overlay Target Images

These images are the actual gallery images that correspond to each of the mouseover target areas. The mouseover target areas are automatically generated based on the number of these overlay images and the overlay rows (in Settings tab).

 

Settings

Transition Effect: Select from 9 different slide transition effects.

Overlay Area Style: Select a style for overlay target areas. There are options such as dotted line, solid line, dashed line, link icon and none. If you want a different target area style, you can always customise the template.

Gallery Width: Enter 0 for auto width. You may also enter a custom width.

Overlay Rows: This creates the mouseover target areas. Entering "1" creates mouseover areas all packed into a single row. Entering "2" generates mouseover areas in 2 rows.

For creating a simple layout, enter a number that is less than or equal to the number of overlay images you have selected.

For example:
If you have 2 overlay images and entered 1 here, it will create 1 row of 2 overlay areas.

If you have 4 overlay images and entered 2 here, it will create 2 rows with 2 overlay areas per row.

If you have 6 overlay images and entered 3 here, it will create 3 rows with 2 overlay areas per row.

You can also make the overlay areas smaller by setting the overlay rows greater than the number of overlay images. If you have 6 overlay images and entered 10 here, it will create a single row of smaller overlay areas.

Please refer to Live Demo for more examples.

Mouseout Action: You can choose to either show the first image or keep displaying the current active image.

Transition Speed: Slide transition speed in milliseconds.

Activate Auto Slideshow: Activate/deactive auto slideshow.

Highlight the active slide during auto slideshow: If checked, this will highlight the active slide.

Auto Slideshow Timeout: Delay between slides during auto slideshow.

 

Styling

For changing the general caption colour and font family, you may override this CSS selector:

.overlay-gallery-wrapper .cycle-overlay { }

You can also target individual caption by using 'nth-child' like this:

.overlay-gallery-wrapper .cycle-slideshow .cycle-slide:nth-child(2) .overlay-desc { }