← All elements
<a class="cs" href="#"><span class="art"></span><span class="cap"><b>Northern Lights</b><small>Read the story</small></span></a>About this card
A picture-style card whose caption slides up from the bottom and the artwork tints on hover or keyboard focus.
How it works
The caption bar is positioned at the bottom of the card but pushed down with a translate, so only the title peeks out. On hover or keyboard focus it slides to its resting place and the small link text fades in, while the artwork zooms slightly and becomes more saturated.
Ways to customise it
- Replace the gradient artwork with an image.
- Edit the caption title and link text.
- Change the 64% starting offset to show more or less of the caption.
Good to know
The whole card is a link and responds to :focus-visible too, so keyboard users see the caption. On touch screens the title stays visible, which is the safe default.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.