Home arrow Style Sheets arrow Page 2 - CSS3 Animated Image Gallery: Transitions
STYLE SHEETS

CSS3 Animated Image Gallery: Transitions


In this first part of a two-part tutorial, you'll learn how to create an animated image gallery by using only some standard markup and a few CSS3 properties.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
November 23, 2011
TABLE OF CONTENTS:
  1. · CSS3 Animated Image Gallery: Transitions
  2. · Defining an Animated Image Gallery's Look and Behavior

print this article
SEARCH DEVARTICLES

CSS3 Animated Image Gallery: Transitions - Defining an Animated Image Gallery's Look and Behavior
(Page 2 of 2 )

This may sound like biased thinking, I know, but in my humble opinion CSS3 transitions are one of the most exciting and powerful features included with the new standard. Thanks to the functionality that they bring, it's possible to animate HTML elements in all sorts of clever ways, without using any JavaScript. 

To demonstrate this point, take a look at the following CSS snippet. It defines the gallery's appearance and uses the power of transitions to alternately hide and display the set of large images: 

ul#gallery {
    list-style: none;
    width: 334px;
    height: 231px;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 7px #808080;
    -moz-box-shadow: 2px 2px 7px #808080;
    -webkit-box-shadow: 2px 2px 7px #808080;
}
ul#gallery li {
    float: left;
    width: 100px;
    padding: 5px;
    position: relative;
}
ul#gallery li img {
    cursor: pointer;
    cursor: hand;
    border: 2px solid #000;
}
ul#gallery li img + img {
    visibility: hidden;
    width: 0;
    height: 0;
    position: absolute;
    top: 40px;
    left: 100px;
    z-index: 99999;
    opacity: 0;
    box-shadow: 2px 1px 7px #808080;
    -moz-box-shadow: 2px 1px 7px #808080;
    -webkit-box-shadow: 2px 1px 7px #808080;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#808080', Direction=120, Strength=7); 
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
}
ul#gallery li:hover img + img {
    visibility: visible;
    width: 250px;
    height: 250px;
    opacity: 1;
}

Aside from adding some sleek shadows and positioning each image in the gallery, the previous CSS snippet utilizes the "transition" property to apply a smooth transition effect to the enlarged pictures when a user hovers their cursor over the thumbnails.

Naturally, it's possible to tweak the effect by altering its duration, the easing algorithm or the properties that are transitioned (in this case, the opacity and the images' dimensions). However, this will be left as homework for you, in case you feel adventurous and wish to customize the gallery's default behavior.

So now you've seen how easy it is to understand the logic driving this sample gallery. But will it really be as functional as it seems when tested on most modern browsers? In fact, it will be! However, the best way to demonstrate this is by adding the CSS styles just defined to the corresponding markup.

Animated Image Gallery Source Code

If you want to see the actual functionality of this animated image gallery for yourself, below I included its source code. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building an image gallery with CSS3</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.9em;
    font-weight: bold;
    color: #953100;
}
h2 {
    font-size: 3em;
    color: #953100;
}
p {
    margin: 0 0 10px 0;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}

/* gallery styles */
ul#gallery {
    list-style: none;
    width: 334px;
    height: 231px;
    padding: 10px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 7px #808080;
    -moz-box-shadow: 2px 2px 7px #808080;
    -webkit-box-shadow: 2px 2px 7px #808080;
}
ul#gallery li {
    float: left;
    width: 100px;
    padding: 5px;
    position: relative;
}
ul#gallery li img {
    cursor: pointer;
    cursor: hand;
    border: 2px solid #000;
}
ul#gallery li img + img {
    visibility: hidden;
    width: 0;
    height: 0;
    position: absolute;
    top: 40px;
    left: 100px;
    z-index: 99999;
    opacity: 0;
    box-shadow: 2px 1px 7px #808080;
    -moz-box-shadow: 2px 1px 7px #808080;
    -webkit-box-shadow: 2px 1px 7px #808080;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#808080', Direction=120, Strength=7); 
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
}
ul#gallery li:hover img + img {
    visibility: visible;
    width: 250px;
    height: 250px;
    opacity: 1;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Building an image gallery with CSS3</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit.</p>
    </div>
    <div id="content">
        <h2>Image Gallery</h2>
        <ul id="gallery">
            <li>
                <img src="small1.jpg" width="100" height="100" />
                <img src="big1.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="small2.jpg" width="100" height="100" />
                <img src="big2.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="small3.jpg" width="100" height="100" />
                <img src="big3.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="small4.jpg" width="100" height="100" />
                <img src="big4.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="small5.jpg" width="100" height="100" />
                <img src="big5.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="small6.jpg" width="100" height="100" />
                <img src="big6.jpg" width="250" height="250" />
            </li>
        </ul>
    </div>
    <div id="footer">
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit.</p>
    </div>
</div>
</body>
</html>
 
Mission accomplished. Armed with the above code sample (remember to download the sample images shown previously first), you shouldn't experience any major inconveniences testing the gallery on your own browser -- even if it's Internet Explorer. If all goes well, the gallery should look similar to the one depicted in the below screen capture:

Certainly, this isn't the most full-featured image gallery that you'll see in your lifetime, but considering that its implementation only required the coding of some basic markup and a few straightforward CSS styles, the result is more than acceptable. Moreover, tweaking its appearance and behavior is a very simple process. I'll explain how to do that in the next part of this series.   

Closing Remarks

In this first part of a two-part tutorial, I demonstrated how easy it is to create an animated image gallery  using only some standard markup along with a few CSS3 properties. The entire construction process was reduced to animating the enlarged images via the "transition" property when hovering on the corresponding thumbnails. It was as simple as that.

It's possible, however, to build interesting variations of the previous gallery with minor changes. In the final part I'll be amending the gallery's CSS styles to display the big images in a single container.

Don't miss the final part!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials