165 design references

No Art · illustrated cards on hover

Reel by Andrew Chornyy

The city and the date can live on the poster, but the ticket label cannot live only inside a cursor that a phone will never show.

Visit website · No Art

What to look at

Three posters sit in a row under Upcoming Events. Mumbai is a red stage, November 15, 2026. Costa Rica is a green border of figures, December 1. Buenos Aires is a blue city under a sun and a striped flag, December 12. Each drawing has NoART across the middle, and the city and date sit in type under the picture. The pointer moves across the row. The poster under it keeps its color, grows a thin frame, and picks up a red bar reading INFO & TICKETS. The other two wash out. On several frames the city line scrambles into letters you cannot read, then comes back.

Buenos Aires stays in color with a red INFO & TICKETS bar, while Costa Rica washes out. The date stays under the poster.
Buenos Aires stays in color with a red INFO & TICKETS bar, while Costa Rica washes out. The date stays under the poster.
The same red bar sits on Costa Rica. Mumbai and Buenos Aires are pale, and December 1, 2026 still reads under the drawing.
The same red bar sits on Costa Rica. Mumbai and Buenos Aires are pale, and December 1, 2026 still reads under the drawing.

Why it works

The red bar is a signifier: a short rectangle in a color the drawings do not use, with a label and a small arrow. People decide what they can click from cues like shape and color, and they should not have to sweep the page with the pointer to find the link. The wash on the other posters is a state change, and motion makes that switch easier to notice than a silent cut, which people often miss. The words INFO & TICKETS show up only with the pointer, the way a tooltip does, and that kind of message is not available on a touchscreen. The city and the date stay under the picture, which is where a fact has to sit if someone needs it to choose an event.

Try it

  1. Print the city and the date under every poster, and leave that line readable when the pointer arrives.
  2. Put Info and tickets on the poster as a real label, not only in a bubble that follows the mouse.
  3. On a phone, show that same label on the poster, because a finger has no hover.
  4. Make the whole poster the link, so a tap on the drawing and a tap on the label open the same event.
  5. Skip the letter scramble on the city name. Fade the other posters only while the pointer is on the row, and bring them back when it leaves.

What it costs

The live page hides that red cursor when the device has no hover, so a phone never sees INFO & TICKETS, and from 768 pixels wide the source fades every poster in the row except the one under the pointer. The scramble hides the city name for a moment, which is the line that tells the events apart. Andrew calls the hover a great example of a call to action. The action in the recording is still the whole poster.

Words worth knowing

Sources