7 Visual Effects with CSS
In the last chapter, you gave Ottergram the ability to respond to user interaction by changing the detail image when the user clicks a thumbnail. You will build on that in this chapter by adding three different visual effects to Ottergram.
The first effect is a simple layout change that involves hiding the detail image and letting the thumbnails take up the width of the page. When the user clicks a thumbnail, you will make the detail image reappear and return the thumbnails to their previous size.
The other two effects will use CSS to create visual animations for the thumbnails and the detail image (Figure 7.1).
Figure 7.1 Ottergram with transition effects
Hiding and Showing the Detail ...
Get Front-End Web Development: The Big Nerd Ranch Guide 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.
