+65 8180 0424
We can use CSS to create accordion photo galleries. Here is an example for horizontal accordion photo gallery. Please click on the images to view the photo gallery in Google Chrome browser.
Steps followed to create the above gallery that slides horizontally, are given below.
1. We assign a main div which holds all the images.
The above height and width parameters would depend on the size of our images.
2. Second, we place a container inside it to give a background image
Note: This step is optional, to enhance the look of our gallery.
3. Thirdly, we assign separate divs to our images, as given in the style below
In the above style, we have compressed our images in width, to 30 pixels. Also, the '-webkit-transition' property is used for the gradual transition of images from compressed to their actual size.
4. In this step, we assign the hover effect to our image container, wherein we expand it in width, to the actual size of our image. In this case, the actual width of the image is 320 pixels
5. Next, we assign style to the images, and give the hover effect
As obvious, in this step the image would be compressed before hovering. On hovering, it would retain actual size.
The HTML code for the above styles given is shown below
With this we come to an end of this tutorial. You can also try out creating vertical sliding gallery. For that too, same logic can be used, with the only difference that our images would be compressed in height instead of width. The example for the same is shown below.