Grid Gallery with Gradient Overlay

What a gradient overlay adds to a grid

The overlay is the layer the Fade skin draws over an image, and its Background field takes more than a flat color. Pick a gradient and the tint sits opaque at one edge, clear at the other, so the title and date stay readable while most of the photo comes through. The grid above is two columns of Media Library images at contrast 0.8.

The alternative is the solid overlay a new block starts with, black on Fade and Fly. Solid is the safer choice when the photographs are busy and the caption has to be legible at any cost, but it hides the image. A gradient gives up less of the photo. When the text belongs under the photo, the Classic skin puts it there and leaves the image clean.

What the Overlay panel accepts

All of this is on the Fade skin’s Overlay tab, except the last two entries, from Layout and the Image tab. Values and defaults are in the skin settings reference.

• Background takes a color or a gradient, both with alpha. Fade and Fly start from solid black, Classic and Emerge from black at 20 percent.
• Text Align puts the overlay text in one of nine positions and defaults to Center. A gradient rising from the bottom edge usually wants Bottom Left.
• Display has three values. Hover State Only is the default, Default State Only shows the overlay until the pointer arrives, Always keeps it on.
• Elements decide what the gradient carries: title, categories with a Categories Count of 1 to 20, date as Hide, Default or Human Format, author, and an excerpt cut to 15 words.
• Dimensions is a Pro group. Fade opens it at padding 2em, Items Gap 1.5em between text lines, and margin 0, which the demo keeps.
• Grid, the layout under the overlay, takes Columns 1 to 5 with a default of 3, a Gap that starts at 15 px, and Media Aspect Ratio on Auto.
• Image Transform, Filter and Tilt Effect are Pro. Zoom In moves 5 percent, the filters are browser CSS and leave the file alone, and Tilt Effect Direction on Opposite leans the item away from the pointer.

From two columns to a gradient in three steps

1. Add the Visual Portfolio block, set Content Source to Media and click Add Media. Pick your images, then open Layout, choose Grid and set Columns to 2.
2. In Skin keep Fade, open Overlay and then Colors, and change Background from flat black to a gradient. Set Text Align to Bottom Left, the corner where the tint is darkest.
3. Under Overlay, open Elements and set Display Date to Human Format. Then open Click Action, which starts on URL, and pick Popup so a click opens the lightbox instead of the image file.

The gradient is free, the image effects are Pro

Nothing in those three steps needs a license. Background, Text Align, Display, the Grid layout and the popup ship in the free plugin on WordPress.org. Pro is one plugin with the paid modules already inside it, not an add-on to the free one. The full split is in the free versus Pro comparison, and the license tiers are on the pricing page.

• Free: grid columns and gaps, the Fade skin, a gradient or solid overlay background, the overlay text color, the nine text positions, the title, date and excerpt switches, and the popup.
• Pro: Image Transform and Filter, the Tilt Effect and its direction, overlay Typography and Dimensions, the overlay Blend Mode, Move Overlay Under Image, and editing the five responsive breakpoints under Settings, General.

Questions about gradient captions

Does the gradient show on a phone?

Not by default. A touch screen sends no hover, so set Display to Always and the gradient is drawn from the start. Pro adds Move Overlay Under Image, which renders the overlay below the picture at 320, 576, 768, 992 or 1200 px, as the responsive hover overlays demo does. The tilt effect stays mouse only.

Why does long caption text get a scrollbar?

Since version 3.0 an overlay whose content overflows the item gets a scrollbar, so the text stays reachable. Long excerpts on short items usually trigger it. One rule in the block Custom CSS field hides it, and it is written out in removing the overlay scrollbar.

Can I restyle the overlay text without Pro?

Partly. Colors are free, so the gradient and the text color are yours either way, while Typography and Dimensions sit behind the license. Without Pro, override the skin CSS variables in the block Custom CSS field, for example selector { --vp-items-style-fade--overlay__background: #123; }. The page on fonts, colors and spacing says which control lives where.