Masonry Gallery with Blur Hover Effect

Why blur an image on hover

Every item in a Visual Portfolio gallery carries two sets of image settings, Normal and Hover. The gallery above leaves Normal alone and puts a CSS filter on the Hover state, brightness(1.2) contrast(1.1) opacity(0.8) blur(6.1px). Point at a photo and it brightens and goes soft, while the Fade skin brings the title and its categories up onto the overlay. The browser does that at paint time. The file in your Media Library is never rewritten.

The alternative is grading the Normal state instead, which is what the masonry gallery with image filters demo does. Every thumbnail there is desaturated and hover clears the filter, so the grid reads as one muted block until the pointer arrives. Grading suits a page where the treatment itself is the point. The blur here works the other way round, keeping photos sharp while a visitor scans the grid and softening only the item under the cursor.

Values the Filter control takes

Filter sits on the Image tab of the Skin panel, once for Normal and once for Hover. Both copies are Pro, and the skin settings reference carries every value with its default.

• Seventeen named presets, 1977, Brannan, Inkwell and Willow among them.
• Or a custom set of eight values: Brightness, Contrast, Saturation, Grayscale, Sepia, Opacity, Hue and Blur. This demo moves four of them.
• Original as the Normal default, none as the Hover default. Hover CSS is printed only when a hover filter is set.
• A preview thumbnail showing the result, so you judge the blur before saving.
• The same Image tab on all five skins, Classic, Fade, Fly, Emerge and Caption Move.
• Transform on the same tab, defaulting to Zoom In on hover. The zoom is 5 per cent, the moves 2 per cent.
• Hover Border Radius left empty, which means the Normal radius carries over.

Building the effect in the editor

1. Add the Visual Portfolio block, choose Media as the source and click Add Media. Pick the photos, then open Layout and set Masonry. Columns runs 1 to 5 and starts at 3, with a Gap of 15 px.
2. Open Skin, keep the Fade default and switch the Image tab from Normal to Hover. Set Filter to the custom values and raise Blur until the softening still reads at thumbnail size. The demo stops at 6.1 px.
3. Set Click Action to Popup, then choose Title Source and Description Source for the lightbox text. Add a Filter element and set its Style to Dropdown. In Elementor or WPBakery, save the gallery as a Saved Layout and pick it from the widget.

The line between free and Pro

Most of the gallery above costs nothing. The Masonry layout, the Media source, the Fade skin, the dropdown filter and the lightbox all ship in the free plugin, and the filter on the image is the single part behind the license. The free vs Pro page has the whole split and pricing has the tiers. What Pro adds around this one effect:

• Image filters, on the Normal state and on the Hover state alike.
• Image transform on both states, and the tilt effect that leans an item toward the pointer.
• Blend modes for the overlay and for the caption, Multiply and Difference included.
• Move Overlay Under Image on the Fade and Fly skins, and the five breakpoints it works from, 320, 576, 768, 992 and 1200 px.

Questions from the support inbox

What does the blur do on a touch screen?

It does nothing. Hover is a pointer event, so a phone visitor sees the Normal state and stops there. The overlay text hits the same wall, which is why Overlay Display has an Always setting and why Move Overlay Under Image exists. See why hover effects do not work on a phone.

Does the effect change my original files?

No. Filters and transforms are CSS, applied on render, so the file you uploaded is the file that is served. Delete the setting and the blur goes with it. Watermarks are the one feature that writes pixels, and even there the upload survives, because the stamped copies live under wp-content/uploads/visual-portfolio-pro/watermarks/ as the watermark answer explains.

Can the popup show a different image?

Custom Popup Image in an image’s Media Settings holds a separate file for the lightbox, and Display Image Priority in Click Action decides which of them wins. Both settings are Pro. The lightbox image answer has the short version.