5 Summary cards with hover interactions
This chapter covers
- Clipping static background images using the
background-clipproperty - 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.
