Tiles Gallery with Custom Colors

What a custom overlay color changes

The overlay is the layer drawn over a gallery image, and its Background field takes a color or a gradient, alpha included. On the Fade skin used above, that color is what the photo fades into when the pointer arrives. Out of the box it is solid black on Fade and Fly, black at 20 percent on Classic and Emerge, with white text on top.

A flat color holds the same contrast on every tile. A white title reads the same over a bright sky and over a dark interior. The alternative is a blend mode, which mixes the overlay into the photo instead of covering it, so each tile reacts to its own image. That one needs a license, and the tiles gallery with text blend modes runs Difference over the same sort of photos. Flat color wins when the text matters more than the effect.

The color fields and their defaults

Every color field lives in the Skin panel, under Colors on the Overlay or Caption tab. Tile shapes come from a separate panel, and the gallery above runs 3|1,1|2,1|1,1|2,0.5|1,1| with the default 15 px Gap.

• Overlay Background accepts a color or a gradient with alpha. Fade and Fly start on solid black, Classic and Emerge on black at 20 percent.
• Overlay Text defaults to white. Emerge is the exception, since its overlay carries no text of its own.
• Text Align on Fade and Fly drops that text into one of nine positions, Center by default.
• Overlay Display has three values. Hover State Only is the default, Default State Only shows the color until the pointer arrives, and Always leaves it on.
• Classic and Emerge color a caption instead. Text and Links inherit from the theme, and Links Hover starts on the plugin brand color.
• Blend Mode, Typography and Dimensions sit in the same two tabs and are Pro. The skin settings reference lists every value and default in one table.

Setting the color in the editor

1. Insert the Visual Portfolio block, choose Media as the source and press Add Media. Open the Layout panel, choose Tiles, press Edit Tiles and take one of the 27 presets or write your own pattern.
2. Open the Skin panel, keep Fade, and unfold Colors under the Overlay tab. Set Background to your color or gradient, then set Text to something that survives on top of it.
3. Decide when the color appears with Overlay Display. Hover State Only suits a mouse, Always paints every tile and is the honest setting for phones. Set Click Action to Popup last.

Overlay colors are free, blend modes are not

Nothing in the gallery above needs a license. The tiles pattern, the Fade skin, both overlay color fields, the popup, the dropdown filter and paged pagination ship in the free plugin on WordPress.org, and so does reusing the layout through Saved Layouts. Pro carries that free plugin inside it, so it is one download and not an add-on. A license buys the rest of the styling tabs, listed on the free versus Pro comparison and the pricing page.

• Blend Mode, on the overlay and on the caption, offers 16 modes and starts on Normal.
• Typography reaches the title, category, meta and description of the Fade and Fly overlay.
• Dimensions adds Border Radius, Padding, Margin and Items Gap. Fade and Fly start at 2em of padding and a 1.5em gap.
• Image Filter brings 17 presets plus custom Brightness, Contrast, Saturation, Grayscale, Sepia, Opacity, Hue and Blur, and a second set for hover.
• Move Overlay Under Image renders the colored panel below the picture under 320, 576, 768, 992 or 1200 px.

Color questions from the support inbox

Can I recolor the overlay without Pro?

Yes. Background and Text under Colors are free on all four free skins. Only Typography and Dimensions beside them are paid. Custom CSS reaches those two, because every skin is styled through CSS variables you can set against the word selector, for example selector { –vp-items-style-fade–overlay__background: #123; }.

Why does a tile list one category?

Categories Count in the skin Elements group is set to 1, so an image filed under three terms still prints one. Raise it as far as 20 and the rest appear beside it. On Fade those categories sit on the overlay, so they take the Overlay Text color.

Why is there a scrollbar over my image?

Since version 3.0 an overlay scrolls when its text overflows, so nothing gets cut off. A half height tile in a pattern like this one overflows early, which is where people notice it. Hide it with the one rule in the Custom CSS snippet, or trim the description that spills over.