Responsive Hover Overlays

What the overlay does without a pointer

Hover is a pointer event. A phone has no pointer, so a Fade or Fly overlay holding the title, categories and date never opens, and the visitor scrolls past pictures with no words on them. Move Overlay Under Image changes where that text goes rather than when it appears. At and below the screen width you pick, the overlay stops hovering and is rendered under the image, where it stays visible. This demo runs the Fade skin with the switch on Medium Screens, so the captions sit under the photos at 768 px and below.

The other way out is Overlay Display. Set it to Always and the overlay stays open at every width, which works until you notice the text covering the photo at the size where the photo is already smallest. Moving it under the image keeps the picture uncovered on a narrow screen and the hover reveal intact on a desktop.

Screen sizes, skins and defaults

The switch sits on the Overlay tab of the Skin panel. Every value below is listed with its default in the skin settings reference.

• Fade and Fly have Move Overlay Under Image. On Emerge and Caption Move it is called Move Caption Under Image, as on the masonry gallery with infinite scroll.
• Six values. Keep Default Overlay is the default, and the rest are Move on Extra Small, Small, Medium, Large and Extra Large Screens.
• Those five names are the plugin breakpoints, 320, 576, 768, 992 and 1200 px.
• Overlay Display still runs the wider screens. It takes Hover State Only, the default, Default State Only or Always.
• On Fade the overlay is black with white text, Text Align defaults to Center, padding to 2em and the gap between text elements to 1.5em.
• Elements decides what the moved caption holds. Display Title is on, with a Title Tag that defaults to h2 and takes any heading level or a div. Display Categories is on with a Categories Count of 1, and Display Excerpt is off with a 15 word limit.

Moving the overlay under the image

1. Open the gallery block and set Skin to Fade or Fly. Classic prints its caption under the image already, so the switch is absent there.
2. In the Skin panel, open the Overlay tab and set Move Overlay Under Image to the screen size where the text should drop. Medium Screens is the 768 px threshold this demo uses.
3. Drag the browser window narrow and read what sits under the photos. If the line looks thin, set Display Date to Human Format or raise Categories Count in the Elements group of the same tab.

What the free plugin does instead

Moving the overlay under the image is a Pro setting. The overlay is not, and neither is the way to keep it open, so a free site can still put readable captions on a phone.

• Free: the Classic, Fade, Fly and Emerge skins, the overlay with its own colour and icon, and the title, categories, date and author inside it.
• Free: Overlay Display set to Always, which leaves the text over the image at every width, and Custom CSS per block with the plugin CSS variables.
• Pro: Move Overlay Under Image and Move Caption Under Image, together with the Typography and Dimensions groups that style the caption once it has moved.
• Pro: the Caption Move skin, the tilt effect and hover media, all of which wait for a pointer. Custom responsive breakpoints, which shift those five widths site wide, are Pro too.

The full split is in the free versus Pro comparison, and the licences are on the pricing page.

Questions about overlays on small screens

Why is the title not shown on the image?

Almost always because the block is on the Classic skin, which keeps the title under the image and sends only an icon onto it. Fade and Fly write the text on the overlay, where Text Align picks one of nine positions for it. Emerge raises a caption over the bottom edge instead, which the FAQ on the missing title covers too.

Why does the overlay have a scrollbar?

Since version 3.0 an overlay whose text is taller than the item gets a scrollbar, so the rest stays reachable. A long excerpt on a narrow item is the usual cause. Trim it with Excerpt Words Count, or hide the bar with the Custom CSS snippet for the overlay scrollbar.

How do I change the fonts and spacing in the overlay?

Colours sit in the skin’s Colors section and cost nothing. Fonts are under Typography and spacing under Dimensions, both Pro, both in the same panel. Without Pro, Custom CSS and the plugin CSS variables reach both, and the answer on fonts, colours and spacing names a variable to start from.