Beautify Gallery Pages With CSS3

This Tutorial-Webdesign article will try to create a beautiful gallery page with CSS3.

The idea is that we’ll make the image dim when the mouse hovers, while the zoom icon appears, but we’re not going to make it bigger.

If you’re familiar with the Jquery Plugin Lightbox, you’re probably used to seeing this.

Gallery With CSS3

Like cooking, we first prepare the ingredients.

Background Pattern
Photo
Zoom icon
The logic is that we have an anchor tag a, in that tag we insert span and img, roughly if it is described it will look like the following
Visualization
Layer overview

HTML Structure