Cards & tiles

Whole cards grow type; tiles swap photos and labels

Snowy mountain ridge under blue sky

Summit pack

From $84

Click to view details

Sunlight filtering through tall forest trees

Forest hammock

From $120

Click to view details

Sunlit green hillside with scattered trees

Trail stove

From $48

Click to view details

Photo tiles

Mountains Night lights

Forest Studio desk

Hills Paint texture

Hover a tile: the background image swaps, the label text swaps (.main → .alt, and overlay font-size grows. That is image + text + size together.

Patterns used

.card:hover h3 — title font-size grows
.card:hover .hint — price hides, hint text appears
.tile:hover — different background image URL
.tile:hover .overlay .alt — label text swap via display

Photos via Unsplash. Pseudo-classes can change images, type size, and visible text — not only color.

Important HTML

Each card is a hoverable unit.

<article class="card">
  <h3>…</h3>
  <p class="hint">…</p>
</article>

Important CSS

Card hover reveals secondary details.

.card:hover {
  transform: translateY(-4px);
}
.card:hover .hint { opacity: 1; }