Home arrow Style Sheets arrow Animated CSS3 Image Gallery: Advanced Transitions
STYLE SHEETS

Animated CSS3 Image Gallery: Advanced Transitions


In this second part of a two-part series on building image galleries with CSS3, I'll show you a different way to handle transitions between thumbnails and full-sized images.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
November 28, 2011
TABLE OF CONTENTS:
  1. · Animated CSS3 Image Gallery: Advanced Transitions
  2. · Uploading the Gallery’s Visual Presentation and Animating the Enlarged Images

print this article
SEARCH DEVARTICLES

Animated CSS3 Image Gallery: Advanced Transitions
(Page 1 of 2 )

Although the idea may sound intimidating, building a dynamic (and by dynamic I mean “animated") image gallery using a few CSS3 properties is much easier than you might think. Indeed, in the previous part of this series, I implemented a simple, yet extendable image gallery, which used the “transition” CSS3 property to dynamically hide and display a given image when users hovered their cursors on its associated thumbnail. Best of all, the entire animation process didn’t require coding a single line of JavaScript. 

As with any other web-based user interface component, it’s possible to easily tweak different aspects of the image gallery, including its current behavior and default appearance. Of course, there are many ways to accomplish this; you'll probably find the one that best suits your personal taste on your own. In this case, however, I’d like to make things easier for you and show how to create a slightly different version of this sample gallery by modifying the way its large images are displayed on screen.

As you may recall, in the initial implementation, the images appeared next to each thumbnail. It's really simple to change the gallery’s styles, so that they can be shown in a single container instead.

As usual, the best way to show how to achieve this is by example. Therefore, in the lines to come I’ll be setting up an approachable one, which will implement the variation in a few easy steps.

Creating an Image Gallery’s Bare Bones Structure

As I explained, my plan is to create an engaging variation of the previous image gallery with minor modifications. You may think that these changes require us to “massage” the gallery’s markup, right? Well, not really. In fact, the gallery’s structure is the same as the one you saw here and as you’ll probably recall, looked 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="thumbnail1.jpg" width="100" height="100" />
                <img src="large1.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="thumbnail2.jpg" width="100" height="100" />
                <img src="large2.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="thumbnail3.jpg" width="100" height="100" />
                <img src="large3.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="thumbnail4.jpg" width="100" height="100" />
                <img src="large4.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="thumbnail5.jpg" width="100" height="100" />
                <img src="large5.jpg" width="250" height="250" />
            </li>
            <li>
                <img src="thumbnail6.jpg" width="100" height="100" />
                <img src="large6.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 you can see above, the skeleton upon which the gallery sits is exactly the same, that is a plain unordered list whose items act like placeholders for the thumbnails and the enlarged images. But, wait a second! This time, the list wraps a bunch of different images. Where are they? Don’t worry; I included them for you below. Check them out:   

 

 

 

 

 

Of course, you can implement the aforementioned variation of the image gallery using the same sample images that you saw in the earlier article. However, I decided to create this brand new batch, so that you can pick the set that best fits your needs.

So far, so good. At this stage, everything is finally ready to start making some changes to the gallery. With that said, in the next section I’ll be subtly modifying its CSS code to cause the large images to be displayed within the same container.


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