Opens in a new tab

Cards · Photo on hover

A set of link cards for Bricks Builder with a hidden photo strip: on hover, the photo turns in and the arrow slides to the center of the card. Built on the FBK Card grid, it is a subtle way to add a visual hint to plain text links.

Dark mode ready

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

In the annual plan, $99/year. See plans

Preview

Preview of the photo on hover template: a set of link cards for Bricks Builder with a hidden photo strip

Template details

What’s inside

The components it’s built from. They come with the template when you paste it, and you edit them from the Bricks panel.

  • FBK Card

    A media slot, title, text, a content slot and an actions slot.

  • FBK Card grid

    A grid that takes FBK Card or FBK Icon item instances, or a query loop.

  • FBK Intro

    Eyebrow, title, lead and an actions slot for buttons.

Adjust it

Change these variables in Bricks to tune it; everything else follows your framework.

On the element Photo reveal cards, class fbk-cardsreveal

Photo strip height, the photo's turn when it shows, and the arrow color

--fbk-t-strip
9em
--fbk-t-turn
-4deg

One hover duration for the whole library (--fbk-hover)

--fbk-t-time
var(--fbk-hover)

Replaces

In Fancy Bricks 1.0 and 2.0 this was Cards (2.0).