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. The reason why we have chosen 700px or more is that it becomes less likely that the person is viewing the web page on a desktop or laptop device when the browser window size is less than 700px.
Figure 5.2 Hover Effect on finished product
