Image Card Hover
A grid of image cards that reveal a title and description on hover, with configurable aspect ratio.
What It Does
The Image Card Hover module presents images in a clean grid layout where hovering over a card reveals an overlay containing the card's title and optional description. The reveal effect creates an interactive, gallery-like experience without navigating away from the page. Editors can configure the card proportions globally — portrait, square, or landscape — to match the type of imagery being showcased.
Best Used For
- Portfolio and creative work showcases
- Team member or people directories
- Product category or collection grids
- Service offering overview panels
- Project case study teasers
Variants
Default
Square (1:1) cards in a responsive grid with hover overlay text.
Best for: Product grids and general-purpose image collections where consistent proportions matter
Portrait Aspect
Taller (3:4) cards that suit portrait-oriented photography such as team headshots or fashion imagery.
Best for: People directories, fashion lookbooks, or any collection using portrait-style photography
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| sectionTitle | component | No | Optional heading displayed above the card grid |
| cards | component | Yes | One or more image cards; each card has an image, title, optional description, and optional link |
| aspectRatio | enumeration | No | Card proportions: PORTRAIT_3_4, SQUARE_1_1 (default), or LANDSCAPE_16_9 |
| entranceAnimation | component | No | Scroll-triggered entrance animation |
| background | component | No | Background colour or image for the section |
Tips for Great Results
- Choose a single aspect ratio for all cards — mixing proportions within a grid looks inconsistent.
- Crop and export images at the selected ratio before uploading so they fill each card without distortion.
- Keep hover titles short (3–6 words) so they fit comfortably in the overlay without truncation.
- Use high-contrast overlay text; the default semi-transparent dark overlay works well on most images.
- For team members, combine portrait cards (3:4) with the person's name and role in the description field.
- Limit the grid to 9 cards or fewer per section to keep page load performance strong.
Supported Languages
This module supports English and Thai. All text fields render in the active locale.