Filterable Image Gallery
A static image grid is a museum. A filterable gallery is an experience. Master Addons Filterable Gallery Element turns your portfolio, products, or photos into an interactive discovery tool. Visitors filter by category to see exactly what interests them, while advanced hover effects, tilt animations, and customizable overlays make every interaction feel premium. Showcase multiple projects with titles, descriptions, and dual call-to-action buttons. Whether you’re a photographer, designer, or agency, this gallery doesn’t just display your work – it presents it dynamically.
Smart Filterable Navigation System
Give control to your visitors with a dynamic filter bar. Enable the Show Filter Nav to display category buttons like “All,” “Technology,” “Living.” You can rename the “All” Filter Tab text and set custom labels for each category assigned to your gallery items. Style the filter bar’s Alignment, Typography, and give active tabs a distinct look with separate Normal and Active state styling for colors, backgrounds, and borders. This intuitive filtering helps users quickly find relevant content without scrolling.
- Custom Category Filters: Create filter buttons based on categories you assign to each gallery item.
- Active State Styling: Design the selected filter tab to look different, providing clear visual feedback.
- Flexible Layout: Align filters Left, Center, or Right above your gallery.
- Clean Navigation Bar: Style the filter container with Padding, Margins, and optional Border Bottom separators.
Dynamic Gallery Grids & Advanced Effects
Configure the foundation of your gallery. Choose the number of Columns and the Image Resolution. Enable Masonry layout for a dynamic, Pinterest-style grid, and control the spacing between items with Gutter settings. Then, add stunning interactive effects: use Hover Scale to make items gently enlarge, and activate the Tilt Effect for a 3D mouse-follow movement. Fine-tune the tilt with Perspective, Speed, and even add a Glare effect for a truly polished, modern look that captivates visitors.
- Layout Control: Choose Columns, enable Masonry, and set Gutter spacing for perfect structure.
- 3D Tilt Effect: Add a sophisticated mouse-tilt interaction with controls for angle, perspective, and speed.
- Hover Animations: Items can Scale up on hover and feature a subtle light Glare effect.
- Responsive Foundation: The grid automatically adapts to different screen sizes.
Proper Styling for Every Element
Achieve total design harmony. Style the Item Style (each gallery card) with Padding, Borders, and Margins. Customize the Image Style itself, including a Hover Overlay Color. Then, style all text elements separately: the Title Style, Subtitle Style, and Category labels. The real power comes with Button One & Two Style – design two separate call-to-action buttons per item with independent Normal and Hover states for typography, colors, backgrounds, and shadows.
- Individual Item Design: Style the gallery card’s borders, padding, and background.
- Text Layer Styling: Apply unique Typography and Color to Titles, Subtitles, and Category tags.
- Dual Button Styling: Design two separate buttons (e.g., “Details” and “Demo”) with full state control.
- Icon Customization: Change the Hover Icon’s size and color to match your theme.
Frequently Asked Questions For Filterable Image Gallery
How many gallery items can I add?
You can add as many as you need using the + Add Item button. The system is built to handle large galleries. Performance is best optimized by selecting an appropriate Image Resolution and using caching.
Can visitors view images in a lightbox popup?
You can enable Popup or Links options. Typically, you can set a gallery image to open in a lightbox by linking to any external source can be possible with this element. This is a standard feature in such galleries.
Is the gallery responsive on mobile?
Yes. The Columns will stack appropriately on mobile (e.g., 4 columns become 2 or 1). The filter buttons will also wrap to fit the screen. You can use Elementor’s responsive mode to adjust the Gutter size or font sizes for mobile specifically.
How do I assign items to filter categories?
In the Gallery Contents section for each item, you’ll find a Filter Label field. Enter the category name here (e.g., “Technology”). All items with the same label will be grouped under that filter button. You can assign multiple categories to one item by separating them with commas.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
