Image galleries are nowadays a common component of a website. In this chapter, we'll discover how we can implement a range of transition effects and several navigation modes using only CSS properties. We'll start by implementing a basic transition effect using a series of images, then we'll develop a pure CSS structure to let the user select his preferred navigation mode and transition effect and, finally, we'll add more complex transition effects. The following is a list of the topics we'll cover in this chapter:
A basic gallery HTML structure
Implementing opacity transition
Implementing slide transition
3D transformations
Adding the slideshow mode
Creating previous and next arrow
CSS preprocessors