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 cards will be placed in a single line, using the CSS Grid Layout Module for layout. Each card will have its own background image, with the content placed on top. If the user is viewing the card on a device that supports hover and has a screen at least 700 pixels wide, they’ll be able to see the title and then hover over the card, which will reveal the short description and an orange call-to-action button for contrast with the black background (figure 5.2).

Figure 5.2 Hover effect on finished product

For users whose devices don’t support hover or have a screen less than 700 pixels wide, we’ll show all the information without hover so that the user experience isn’t affected (figure 5.3).

Figure 5.3 Finished product on small or touch devices that can’t handle the hover state

5.1 Getting started

5.2 Laying out the page using grid

5.2.1 Layout using grid

5.2.2 Media queries

5.3 Styling the header using the background-clip property

5.3.1 Setting the font

5.3.2 Using background-clip

5.4 Styling the cards

5.4.1 Outer card container

5.4.2 Inner container and content

sitemap