In this tutorial you are going to create a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window. Adding new photos is as easy as copying two files (a regular image and a thumbnail, preferably 150×150 px) to the gallery folder.

CSS3 capable browsers will show a smoothly animated diagonal fade effect, while older browsers will fall back to a simpler but still perfectly usable non-animated version of the gallery.

Tags: #Code, #CSS, #CSS3, #Gallery, #HTML, #HTML5, #Javascript, #jQuery, #PHP, #Transition, #Tutorial, #Web Design, #Web Development