Image filters apply CSS visual effects to gallery items. FotoGrids provides two independent filter layers: Thumbnail Filters affect the thumbnail images in the gallery grid, and Full Image Filters affect the full-size image wherever it is displayed — in the Lightbox, or in layouts that render full images directly such as Slider and Carousel. Each layer can be configured separately, giving you precise control over how items look at rest versus when they are viewed at full size.
Location Gallery Editor → Settings → Image Effects
Thumbnail Filters #
Thumbnail filters apply to the images shown in the gallery grid.
Enable Thumbnail Filter
| Setting | Enable Thumbnail Filter |
| Options | On Off |
| Default | Off |
When enabled, the filter type and amount controls below become active.
Filter Type
| Setting | Filter Type |
| Options (multi-select) | Grayscale Sepia Blur Brightness Contrast Saturate Invert Opacity Hue Rotate |
| Default | None |
| Visible when | Enable Thumbnail Filter is on |
Multiple filters can be applied at the same time. When you select a filter type, a slider appears below to control its intensity.
Filter amounts
Each selected filter type has its own intensity slider. Defaults and ranges per filter:
| Filter | Default | Range |
|---|---|---|
| Grayscale | 50% | 0–100% |
| Sepia | 50% | 0–100% |
| Blur | 5px | 0–20px |
| Brightness | 100% | 0–200% |
| Contrast | 100% | 0–200% |
| Saturate | 100% | 0–200% |
| Invert | 100% | 0–100% |
| Opacity | 100% | 0–100% |
| Hue Rotate | 0° | 0–360° |
Hover filter overrides #
When thumbnail filters are enabled, you can set a different filter state for when a visitor hovers over an item. This lets you create effects like desaturated thumbnails that restore to full colour on hover, or sharp thumbnails that blur slightly when hovered.
Each filter type has a separate hover amount slider. The transition between the resting state and the hover state is animated.
Full Image Filters #
Full Image Filters work exactly the same way as Thumbnail Filters but apply to the full-size image wherever it is displayed — in the Lightbox, or in layouts that render full images directly such as Slider and Carousel. The same filter types, ranges, and hover controls are available.
Location Gallery Editor → Settings → Image Effects
Enable Full Image Filter
| Setting | Enable Full Image Filter |
| Options | On Off |
| Default | Off |
When enabled, the filter type and amount controls apply to the image shown in the Lightbox. The filter types, defaults, and ranges are the same as for Thumbnail Filters.
Tips #
Thumbnail filters and Full Image Filters are independent. You can apply a grayscale filter to thumbnails while leaving the Lightbox image unfiltered — a common pattern for giving a Gallery a monochrome look in the grid while showing full colour when an item is opened.
Filter effects are applied in CSS and have no impact on the original image files in the Media Library.
