Filter and Sorting: Create a Filterable Image Gallery
Pro Feature: Filter & Sorting requires the Image Hover Effects Ultimate Pro license.
The Filter & Sorting extension adds clickable category filter buttons above your hover effect gallery. Visitors can filter items by category in real time using smooth Isotope.js animations.
Step 1: Navigate to Filter & Sorting
Go to Dashboard → Image Hover. On the main page, scroll down to the Extensions section and click the Filter & Sorting card.
Step 2: Create a New Filter Style
You’ll see a grid of layout templates. Click Create Style on any template.
A modal will appear. Enter a Name for this filter (e.g., “Portfolio Filter”), then click Save.
Step 3: Manage Categories
Before adding items, set up your filter categories. Use the Categories repeater to add, rename, or reorder your categories. Each category you add here appears as a filter button above the gallery.
An All button is always shown by default to display every item.
Step 4: Add Items
Click Add Item to open the item modal. For each item:
- Title: Label for this item (used for accessibility)
- Category Select: Assign this item to one or more filter categories
Repeat for each item you want in the gallery.
Step 5: Set the Image Hover Shortcode for Each Item
The Image Hover Shortcode field is the most important setting per item. It controls the image, overlay, animation, and all visual behavior for that gallery card.
Haven’t created a hover effect yet? Start here:
Once you have a shortcode ready, paste it into the Image Hover Shortcode field for each item. Each item can reference a different shortcode, so you can mix effect types within the same filtered gallery.
Step 6: Choose a Layout Effect
Effect 1: Standard grid layout. Items fill the grid in their natural order.
Effect 2: Masonry layout. Set item widths using the masonry width options:
- Default width for all items
- Wide items (2× width)
- Extra-wide items (3× width)
Step 7: Style the Filter Buttons
Customize the appearance of the filter buttons in three states:
- Normal: Default appearance (background, text color, border, padding)
- Hover: Style when the cursor is over the button
- Active: Style when the filter is currently selected
Step 8: Save and Get the Shortcode
Click Save. Copy the shortcode that appears at the top and paste it into any page, post, widget, or page builder block.
Notes
- Filtering uses Isotope.js and animates smoothly without page reload.
- Items without a category assigned will only appear when “All” is selected.