Tuesday, 7 February 2012
Facebook StumbleUpon Twitter Google+ Pin It

How To Create an Image Gallery Using CSS3

Let's Get to the CSS3 Example 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;

Next, it’s time to set the image sizes to 100% with an absolute position and transition. You’ll notice that in the first variant of the demo, that the images appear greyed out. That is done through opacity, which is also a part of this 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;

To provide a caption to the photos, you can use a pseudo element: after. The caption appears in the bottom right corner of each image. It should be obvious that you can update the content element to your own copyright or caption information.

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;

Using the pseudoclass: focus, you can create the appearance of the image opening and enlarging. This only works with form fields and links, so an a tag is used. Because pseudoclass: focus does not currently work well in Chrome, the alternate solution is to add the index element to the link.

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;

At this point, you should have a working gallery in terms of the CSS3 set up. However, at this point, all of your images will enlarge from the upper left corner to the lower right. This is corrected by using a pseudoclass nth child. This will change the behavior of where the image appears to enlarge from depending on where the image is positioned.

a:nth-child(4n+4) img, a:nth-child(4n+3) img{
right: 0;
} /* every fourth element starting with 3rd and 4th will be enlarged from the right border of browser window */

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

Now to address how to close the images after they have been enlarged. The images are opened through focus and you can close them in the same manner. From the user perspective, the images will be closed by pressing an X (or by simply clicking on another image). Here’s some sample code on how to create the X, which is really a + rotated by 45 degrees.

-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;

To finish, here’s the code for closing an image after it has been enlarged:

display: none;
display: block;

This will also cause the X to close as well. Good luck with this sample code and hopefully you’ll be on your way to creating a CSS3 image gallery.

No comments: