Home arrow Style Sheets arrow 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
(Page 1 of 2 )

Since the beginning of the Internet, image galleries have been one of the most overused (and sometimes misused) user interface elements available. There's a good reason for this timeless popularity: supported by HTTP from its first incarnation, images were (and are) a powerful tool for delivering content to users in a refreshing and effective way, without condemning them to long lines of arid and dull text.

As one might expect, image galleries have gone through a constant and healthy evolution process. This process ranged from primitive implementations that relied heavily on a bunch of "<img>" tags interspersed with ugly inline JavaScript chunks, to more modern and cleaner approaches, which often use unobtrusive client-side scripting to animate or manipulate the target images, while preserving the markup pristine and untouched.

It's fair to stress, though, that the release of CSS3 has extended the many options programmers can use used for building "dynamic" image galleries even further. What's more, in most cases a proper combination of solid HTML along with a few CSS3 properties is all that you'll need to delight visitors to your web site with an eye-catching image gallery that will keep them coming back for more. Yes, even though it may sound like a cliché, no JavaScript is required to get things rolling.

Naturally, such bold claims must be backed up with code samples. In this two-part tutorial I'll show you step by step how to create an animated image gallery using CSS3. Of course, you'll be able to tweak the code to suit your own requirements.

Defining the Image Gallery's Markup

The first step in the implementation of the image gallery is defining its structural markup. In this case, I decided to set the pertinent structure upon an unordered list, whose containing web page looks like this:

<!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>
</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>

As the above code fragment shows, the gallery's skeleton features nothing especially difficult to grasp. It  uses a plain HTML list to place the corresponding images. In addition, you should notice that each thumbnail (identified as "small1.jpg," "small2.jpg" and so forth) is a sibling of its enlarged version; this means that the bigger pictures are "eagerly-loaded" on the web page. Got that point? Good.

Needless to say, the previous example would be incomplete if I didn't show you the sample images that I'll be using to get the gallery up and running. Here they are:
 

 

 

 


 


So far, so good. Having shown you the sample pictures that comprise the gallery, the next thing we'll need to do is implement the logic required to hide the enlarged images from view, and display them when a user's cursor is hovering on the pertinent thumbnails.


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