5 Summary cards with hover interactions

This chapter covers

  • Clipping static background images using the background-clip property
  • Using transitions to reveal content on hover
  • Using media queries to choose styles based on device capabilities and window size

Summary cards are used for a range of purposes, whether that be showing a preview for a film, buying a property, previewing a news article, or (in this chapter) showing a list of hotels. Usually, a summary card contains a title, description, and a call to action; sometimes, it also contains an image. Figure 5.1 shows the cards we’ll create in this project.

Figure 5.1 Finished product

The ...

Get Tiny CSS Projects now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.