The thumbnails module doesn’t contain anything too fancy. The full code of this module is presented below. In case you consider yourself a beginner with CSS, you might also want to study how the buttons are made circular and how the arrows are drawn. Styling for the focus event is important because it enhances the accessibility of an element for those users navigating the website via the keyboard (for example, by hitting the TAB key). The second point is that we define how the style of the arrows changes when users hover over or focus on them. By doing so, we ensure that the image doesn’t overflow the container. Then, the img element inside it â€“ used to show the selected image â€“ is constrained by setting its max-height and max-width property to 100%.

The first point is that the element with a class of gallery, which acts as a container for the photo shown in its natural size, is given a fixed height of 500px. It’s made of simple declarations, and I’ll highlight a few points of interest.

The gallery module defines the styles of the gallery and its components.

In the previous article, we discussed the module of the helper classes and the layout modules.

Flickr images