Luster Carousel: Full Image Cards Where the Text Lives on the Picture

October 27, 2026
·
Shahidul Islam
Luster carousel showing full image cards with the title over the picture

A standard post card is a picture with a box of text under it. It is reliable, it is what most sites use, and it is also why most blog rows look the same. The card has two halves and the eye reads them as two things.

The luster carousel collapses that. The picture fills the whole card, the category badge floats at the top, and the title and meta sit at the bottom over the image itself. On hover the content lifts. There is no box under the photograph, because the photograph is the card.

It is a free widget driven by the shared query builder, so the row updates itself as you publish.

Luster carousel showing full image cards with the title over the picture
The picture fills the card and the text sits on it, with the category badge floating top left

Where a luster carousel fits

  • A travel, hotel or venue page. The photograph is the argument, and this card gives it the whole tile.
  • A magazine or culture site. Editorial images deserve better than a thumbnail above a text box.
  • A portfolio or case study row. The project shot carries the card; the title is a label on it, not a caption under it.
  • A food or recipe site. Nothing sells a dish like the picture at full tile size.
  • A property listing strip. The image does the selling, the badge carries the area, the title carries the address.
  • A video archive. The play overlay sits naturally on a full bleed card rather than on a small thumbnail.

Why it beats the usual approach

Standard cardA picture with a captionLuster carousel
Image size in the tileAbout halfAll of itAll of it
Where the title sitsIn a box belowBelowOn the image
Hover behaviourUsually noneNoneContent lifts
Card heightGrows with the textVariesA control, default 420 pixels
Reads as one objectNo, two halvesYesYes

The features that matter

The image is the card, and the widget enforces it. The image toggle is fixed on, because removing the picture would leave the design with nothing to sit on. That is an honest constraint rather than a setting that breaks the layout.

Card height is a control, not an accident. A responsive height, defaulting to 420 pixels, overrides the stylesheet. That is what keeps every tile identical when one post has a three word title and another has fifteen.

The category badge floats over the image. Top left, on the picture, so the label is visible without stealing a line of the card.

Content lifts on hover. The text group moves as one on hover rather than each element animating separately, which is what makes the card feel like an object rather than a stack of elements.

Columns are per breakpoint. The column control feeds the slider directly, so the desktop, tablet and phone counts are three separate decisions.

The excerpt is off by default, and hidden on tablet. That is deliberate: an excerpt over a photograph at tablet width is the fastest way to make a clean card look crowded.

Luster carousel cards with the category badge floating on the image
Left: the badge over the image rather than taking a line. Right: title and meta over the bottom of the picture

How to build it

  1. Drop the widget in and open Query. Set the post type and terms first.
  2. Set columns per breakpoint. Three on desktop suits a 420 pixel tall card; four starts to crop the titles.
  3. Set carousel height. This is the control that decides the shape of the card, so settle it before styling anything inside it.
  4. Choose the image size. These tiles are large, so a small registered size will look soft at full bleed.
  5. In Additional, decide on the category badge, the date and the author. Leave the excerpt off unless the tiles are unusually wide.
  6. Style the item, then the title, then the meta, in that order. The item background and padding sit underneath everything else in the card.

Why it works

Putting the title on the picture is not decoration, it is compression. One object instead of two halves means the reader takes in the tile in a single glance, which is what a row of six needs to work at all.

The fixed height is what makes it hold together. Cards that grow with their text produce a ragged row, and a ragged row of overlay cards looks like a bug rather than a style. Setting the height once means the design survives whatever your editors write.

A row of cards is read as a pattern before it is read as content. Anything that breaks the pattern, like one tall card in five, costs more than the extra line of text was worth.

Each slide is a permalink to a real post, so the row adds internal links to the page rather than a gallery of images that happen to be clickable.

The hover behaviour is deliberately one movement rather than several. The text group moves together and the button rises into the space it leaves, which is why the card reads as an object responding rather than as three elements animating on their own schedules. It also means the resting state keeps its layout box, so nothing jumps when the pointer arrives.

The item padding is the control most people reach for first and understand last. Because the content sits absolutely over the image, padding has to move the overlay as well as inset the picture, and it does. What it cannot do is show itself without a surface: give the item a background fill and the padding becomes a visible frame, leave it transparent and the same value reads as nothing more than extra gap between cards.

Getting it right

  • Use images that survive a gradient. The text sits over the picture, so a photograph with a busy bottom third makes titles hard to read.
  • Keep titles short. They live on the image, and a five line title over a photograph defeats the whole design.
  • Set the height against your column count. A 420 pixel card at six columns is a narrow strip. Either raise the height or drop to three or four.
  • Give the item a background. The item padding only shows as a visible inset when there is a fill behind it, otherwise it reads as extra gap.
  • Check the hover on touch. There is no hover on a phone, so the resting state has to be complete on its own.
  • Choose a registered image size. Full bleed cards are the place where a too small thumbnail shows immediately.
Luster carousel card at a larger size
Card height is a control, so every tile matches whatever the titles do

What else it can carry

The card is post shaped, so a properties type renders with the photograph, the location taxonomy in the badge and the address as the title. A course type renders the same way with the level in the badge.

It also makes a strong section divider. One row of three tall tiles between two text heavy sections gives a page a visual break that still links somewhere useful, which a decorative image band does not.

A luster carousel is also the right answer when the featured images are inconsistent in subject but consistent in quality. Because every tile is the same size and the text always sits in the same place, a mixed set reads as one collection rather than as a row of unrelated pictures. That is harder to achieve with a standard card, where the picture and the text box each vary and the differences compound.

The video settings group extends it to film archives. A play marker on a full bleed tile is unmistakable at any column count, which is not true of the same marker on a small thumbnail above a text box.

Where a set needs to be seen all at once rather than moved through, the grids cover it: the plugin ships grid siblings reading from the same query builder. Alongside them, a showcase wall suits an image led set and a showcase flow suits one that should look designed rather than listed.

Luster carousel on a desktop and a phone screen
On a phone one column keeps the card at a size where the overlay text still reads

Luster carousel: common questions

Is the luster carousel free?

Yes. It is a widget in the free Sky Addons plugin, including the query builder, the height control and the hover behaviour.

Does it need another plugin?

No. Elementor and Sky Addons are enough. It reads whatever post types your site already registers.

Will it slow the page down?

It loads one image per visible card, and those images are shown large, so the image size you choose matters more here than on a small card. It uses the slider library already shared across the plugin.

Does it work on mobile?

Yes. Columns and height are per breakpoint. Since there is no hover on a phone, make sure the resting card is complete on its own.

Can I turn the image off?

No, and that is deliberate. The card is built around a full bleed picture, so the toggle is fixed on rather than offering a setting that would break the design.

The short version

The luster carousel builds a post row from full image cards: the picture fills the tile, the category badge floats on it, the title and meta sit over the bottom, and the content lifts on hover. Height is a control, so the row stays even whatever your titles do. It is free.

Build it

See it running on the Luster Carousel demo, then read the control reference in the Luster Carousel documentation. It is part of the free plugin: see what else is included on the free versus Pro page, and the plans on pricing.

Written by
Shahidul Islam
Writes about the work behind the widgets — what shipped, why, and what it cost.
Share
In this post

More from the journal

Instagram Feed Carousel: Put the Feed in a Row Instead of a Wall

Instagram Feed Carousel: Put the Feed in a Row Instead of a Wall

The Instagram Feed Carousel shows your live posts as a slider rather than a grid: one to five columns, cached, with an active slide state. Sky Addons Pro.
Mate Slider: Two Panes That Move Together, Image on One Side, Story on the Other

Mate Slider: Two Panes That Move Together, Image on One Side, Story on the Other

The Mate Slider runs two synced sliders side by side: full bleed images on one, post content with parallax text on the other. Free, and query driven.
Luster Carousel: Full Image Cards Where the Text Lives on the Picture

Luster Carousel: Full Image Cards Where the Text Lives on the Picture

The Luster Carousel builds a post row from full image cards with the text over the picture and a hover lift. Query driven, free, and height is a control.

Comments are closed.