Design, CG Graphics & Inspiration
Making an Image Gallery with CSS3

Making an Image Gallery with CSS3

Quite recently I’ve decided to try CSS3 features in operation. To look at what they are suited for in reality. My look fell on the well known galleries of fancybox etc. In other words, I’ve decided to do the similar js gallery, but only on clean html+css.

Let’s start.
I didn’t puzzle over the pictures’ disposition, and lined them up through float: left. The link (“a” tag) acted as a parent for picture, we’ll discuss it below. As I decided to do four rows with four pictures, we set them 25% heights and widths. We “place” the borders in a container through box – sizing. It looks like this:[code]a{
float: left;
width: 25%;
height: 25%;
position: relative;
border: 1px solid #333;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}[/code]

Now we work with an image. We set the sizes 100%, position: absolute and transition. Here is the code:[code]a img{
display: block;
width: 100%;
height: 100%;
-webkit-transition-property: width, height; /* we specify, what properties we need to change*/
-webkit-transition-duration: 300ms; /* we specify, with what speed it is necessary to return an image in its initial look*/
-moz-transition-property: width, height;
-moz-transition-duration: 300ms;
-o-transition-property: width, height;
-o-transition-duration: 300ms;
position: absolute;
opacity: 0.3; /* add opacity*/
cursor: pointer;
}
[/code]

In one of the gallery’s variants I decided to make captions to the photos and realized it through a pseudoelement: after.[code]a:after {
display: block;
position: absolute;
width: 100%;
height: 100%;
content: "Studio.com";
color: #eaeaea;
font-family: "Trebuchet MS";
font-size: 16px;
opacity: 0.5;
}[/code]

I think that everything is clear here.

A question aroused, after what actions an image should be opened. In fact it is necessary, that it was opened and remained in this state, that we could see it properly. I’ve found an answer in a pseudoclass: focus. As it works only with the form fields and links, we may need “a” tag.
Let’s arrange everything:[code]a:focus img{
width: 250%; /* we increased an image to this size */
height: 250%;
position: absolute;
opacity: 1; /* transparency is not needed */
z-index: 1; /* for a photo to enlarge over all images */
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000; /* we add some beauty */
-webkit-transition-property: width, height; /* we decrease the image */
-webkit-transition-duration: 2s; /* we specify, with what speed it is necessary to increase an image */
-webkit-transition-delay: 0.3s; /* as a browser will process it, before enlarging a photo */
-moz-transition-property: width, height;
-moz-transition-duration: 2s;
-moz-transition-delay: 0.3s;
-o-transition-property:width, height;
-o-transition-duration: 2s;
-o-transition-delay: 0.3s;
cursor: default;
}
[/code]

Note. Pseudoclass: focus doesn’t work correctly with Chrome browser, I’ve found an exit by adding tabindex to the link.

Theoretically everything is ready for use. But the trouble is that all images are enlarging from the left overhead corner to the lower-right, and it’s not always comfortable. In fact if this gallery will appear near right or lower borders of the browser window then the enlarged image will form the corresponding scroll bars. How to get rid of this? Here a pseudoclass : nth – child came to aid, with its possibility to set periodicity of properties’ application:[code]a:nth-child(4n+4) img, a:nth-child(4n+3) img{
right: 0;
} /* every fourth element starting with 3th and 4th will be enlarged from the right border of browser window */

Advertisement

a:nth-child(n+9) img{
bottom: 0;
} /* all elements, starting with the ninth will begin to enlarge upwards */
[/code]

As I have 4*4 grid in this case the 12 element will be enlarging from below and from the right to the left overhead corner. Thus all our images will be shown in a container with images. At the same time we’ve decided a problem with the dynamically added images – we don’t have to assign the classes -: nth – child will take care of it.

Now everything is ready. But how to close an image forcedly? That’s a reasonable question. As our photo is opened on “focus”, then to close it we need to clean it from the focus. I’ve decided to make one general “button” and to hang it up in a right overhead corner from the gallery. What is notable here is that I did it from an ordinary plus, by turning it on 45 degrees and adding it a shade:[code]-webkit-text-shadow: 0px 0px 5px #222;
-moz-text-shadow: 0px 0px 5px #222;
text-shadow: 0px 0px 5px #222;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
cursor: pointer;
[/code]

However, we got used that one element can depend on another and react on its actions only if it’s a descendant. The selector of generalized family elements “~” came to help us. As a result, we did one element in marking and placed it in a container to our images, that they had one general parent. And then we apply a standard method:[code].closed{
display: none;
}
a:focus~.closed{
display: block;
}
[/code]

Now, if we will press on any photo, the cross appears in a right overhead corner, and when you click it the image decreases, and the cross, accordingly, disappears too.

Working examples:
First variant
Second variant

You might also be interested in..

How to Achieve Text Fading Effect in CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
Sprite animation in CSS3
CSS3 Now! Transitions
Sprite animation in CSS3
CSS3 Now! Transitions
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

  • Softlink,
  • November 8, 2011

SHARE THIS POST

Author's website - http://alpatriott.ru/

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • Anthony

    Hi, please tell me, am I allowed to use your code freely? Do I need to add acknowledgements in a comment in the css/html, or even in a meta?

    • Softlink

      Hi! My code can be freely used and refined. Adding comments is optional. But if you do, I’ll be grateful. :)