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 the device’s capabilities and browser window size
Summary cards are used for a range of purposes, whether that be showing a preview for a film, buying a property, a preview of a news article or in our case showing a list of hotels. Usually a summary card contains a title, description, a call to action and sometimes an image. The cards we will create in this project can be seen in figure 5.1.
Figure 5.1 Finished Product
The cards will be placed in a single line using the grid 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 is at least 700px or more wide then the user will 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 against the black as seen in figure 5.2.
Figure 5.2 Hover Effect on finished product
For those users viewing on a device that does not support hover or is less than 700px, we will show all of the information without hover so the user experience is not impacted (figure 5.3).
Figure 5.3 Finished product on small or touch devices that can't handle hover state
