Hover effects add motion to a Gallery when a visitor moves their pointer over an item. They can animate the image itself, the tile that holds it, or a caption that slides into view — turning a static grid into something that responds to attention. Hover effects are set per Gallery, so different Galleries on your site can each have their own behaviour.
Location Gallery Settings → Effects → Hover Effects
How hover effects work #
When you pick an effect, FotoGrids tags the Gallery so the matching animation runs whenever an item is hovered. The effect plays on pointer-over and reverses when the pointer leaves. On touch devices, where there is no hover state, the effect degrades to a tap state or stays neutral, so mobile visitors always see a usable Gallery.
Every effect falls into one of three groups based on what it animates:
- Image effects animate the photo or video inside the tile — a slow zoom, a pan across the frame, a shift to grayscale.
- Tile effects animate the whole item container — lifting it, drawing a frame around it, or tilting it slightly.
- Caption effects reveal or move the caption text on hover. These only work when the item has a caption to show.
Some effects combine more than one of these — for example, an effect that lifts the tile and reveals the caption at the same time.
Hover effects are applied in CSS and never change your original image files.
Cursor Style #
The cursor style controls the pointer shape a visitor sees when they hover over an item. It is a small cue that signals what will happen on click — a pointing hand suggests the item is clickable, a magnifier suggests it will open larger.
| Setting | Cursor Style |
| Options | Default Pointer Alias Zoom In Crosshair |
| Default | Pointer |
- Default — the standard arrow cursor; the item gives no special click cue.
- Pointer — the pointing-hand cursor, signalling a clickable item.
- Alias — the shortcut/link cursor.
- Zoom In — a magnifier cursor, suited to items that open in the Lightbox.
- Crosshair — a precise crosshair cursor.
Hover Effect #
The Hover Effect setting is the main control. It shows a grid of live previews — hover over any option to watch the effect play on a sample item, then click to select it. The currently selected effect is highlighted.
| Setting | Hover Effect |
| Default | None |
Each option in the grid is tagged to show what it animates — Image, Tile, Caption, or a combination. Caption effects display a red caption tag when the Gallery has no caption to reveal; turn on a caption title or description for those effects to take effect.
The effects available in the free plugin are:
- None — no hover animation; items stay still when hovered.
- Zoom — the whole tile scales up smoothly on hover.
- Pan — a slow Ken Burns drift: the image gently zooms and slides across the frame for a cinematic feel.
- Blur Focus — the image sits slightly blurred at rest and sharpens to full focus on hover.
- Grayscale — the image is desaturated at rest and returns to full colour on hover.
- Tint — a colour wash sits over the image at rest and clears on hover.
- Lift — the whole tile rises and gains a soft shadow, as if lifting off the page.
- Frame — an inset ring grows inward over the image, framing it without shifting the layout.
- Tilt — the tile leans toward the viewer with a subtle perspective tilt.
- Caption Fade — the caption is hidden at rest and fades in on hover. Works with any caption placement.
- Caption Rise — the caption slides up into place as it fades in.
- Caption Slide — the caption sweeps in horizontally as its background fades in.
- Caption Split — the title reveals first and the description follows a beat later. Falls back to a plain title reveal when there is no description.
- Spotlight — a combination effect: the image zooms while the caption rises into view.
Choosing an effect
Pick an effect that matches the job the Gallery is doing. A slow zoom or pan keeps attention on the photography and suits a portfolio. Lift and frame effects add a sense of depth and work well for product grids. Caption effects are the right choice when each item carries a title or short description you want revealed on hover rather than shown all the time.
Not every effect is available on every layout. Effects that depend on tile movement are hidden on the Slider and Image Viewer layouts, and pan is hidden on Masonry and Justified layouts where item heights vary. The grid only shows the effects that work with the Gallery’s current layout, so you can pick freely from what is listed.
Some effects animate the image, border, or shadow on hover and take over that property while active. A Hover Image Filter, Border, or Shadow set under Styling may not apply while such an effect is running.
Other Items on Hover #
This setting applies a subtle effect to the rest of the Gallery while one item is hovered, so the hovered item stands out from its neighbours.
| Setting | Other Items on Hover |
| Options | None Fade Blur |
| Default | None |
- None — the other items stay unchanged when one is hovered.
- Fade — the other items dim slightly to push focus onto the hovered item.
- Blur — the other items blur slightly so the hovered item reads as the sharp point of interest.
More Hover Effects (Pro) #
The free plugin ships a working set of hover effects. FotoGrids Pro adds a larger library of advanced effects across the same grid, including:
- 3D motion — parallax tilt, 3D tilt, 3D push, flip and flip-vertical, swing, and pop, for tiles that respond to the pointer in three dimensions.
- Colour grades — duotone, saturate pop, warm/cool shift, vignette, bloom, and flash, for richer image treatments on hover.
- Caption reveals — reveal mask, gradient sweep, split doors, slide curtain, and a typewriter-style caption reveal, for more expressive ways to bring text in.
- Cinematic combinations — spotlight pro, zoom-pan-blur, cinematic bars, glass frost, and depth stack, which animate the image and caption together.
Pro also unlocks the Fade and Blur options under Other Items on Hover, so the rest of the Gallery can recede while one item is in focus.
On free installations these effects appear in the grid with a Pro badge and animate in preview, so you can see what they do before upgrading.