Do you want your Elementor gallery tiles to tip in 3D as the pointer crosses them? A tilt effect makes a flat grid feel physical, and because it responds per tile it gives immediate feedback about which image is under the cursor.
The Gallery Listing widget in The Plus Addons for Elementor has it built in, with control over the angle, the perspective, the scale and the speed.
To check the complete feature overview documentation of The Plus Addons for Elementor Gallery Listing widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Tilt 3D Parallax is part of The Plus Addons for Elementor Pro. In the free plugin the option is visible but shows an upgrade notice instead of its settings.
- Widget to enable: Gallery Listing, switched on under ThePlus Settings > Widgets.
This tips each tile in 3D. If you instead want the whole gallery to drift as the pointer moves, that is a different control — see add a parallax effect to an Elementor gallery listing.
Step 1: Build the gallery first
Drag the Gallery Listing widget onto the page, choose a layout in Content > Layout, and add your images in Content > Content. Tilt applies to the tiles the gallery already has.
Step 2: Turn on Tilt 3D Parallax
Go to the Style tab, open its Extra Options section, and turn on Tilt 3D Parallax.
This is the Style tab’s Extra Options. The Content tab has a section with the same name holding the image-sizing controls, which is the usual reason people cannot find this toggle.
Step 3: Tune the tilt
Tilt Options opens a popover with four sliders:
- Max — how far the tile tips, in degrees. This is the one that decides whether the effect reads as subtle or as a gimmick.
- Transform Perspective — how strong the 3D projection is. Lower values exaggerate the depth.
- Scale — whether the tile also grows slightly on hover.
- Speed — how quickly it follows the pointer.
What It Looks Like
Settings Reference
| Setting | Where | Type | Default |
|---|---|---|---|
| Tilt 3D Parallax | Style > Extra Options | Switcher — Pro | Off |
| Tilt Options | Style > Extra Options | Popover | — |
| Max | Tilt Options popover | Slider, degrees | Not set |
| Transform Perspective | Tilt Options popover | Slider | Not set |
| Scale | Tilt Options popover | Slider | Not set |
| Speed | Tilt Options popover | Slider | Not set |
| Mouse Move Parallax | Style > Extra Options | Switcher — Pro | Off |
Limitations
- It is Pro. The free plugin shows the toggle and then an upgrade notice.
- There is no hover on touch devices. The effect does not run on phones or tablets at all.
- No per-device value. One setting applies everywhere.
- Large angles distort the image. A high Max value with a low perspective makes photographs look warped rather than dimensional.
- Motion preferences are not handled for you. Keep the values small on pages with a broad audience.
Troubleshooting
I cannot find Tilt 3D Parallax
It is on the Style tab, in that tab’s Extra Options section — not the Content tab’s section of the same name.
The tilt does not happen
Set a Max value in Tilt Options; with it unset there is no angle to tip through. Then clear any page cache and regenerate Elementor files from Elementor > Tools > Regenerate CSS & Data.
The images look warped
Lower Max and raise Transform Perspective. A shallow angle with a long perspective reads as depth; a steep angle with a short one reads as distortion.
Related Docs
Also, read how to add a parallax effect to an Elementor Gallery Listing.
- Gallery Listing widget: settings overview — every control in the widget.
- Create an Elementor masonry image gallery
- Create an image gallery in grid layout
