Home arrow Style Sheets arrow Page 2 - 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 - Uploading the Gallery’s Visual Presentation and Animating the Enlarged Images
(Page 2 of 2 )

As I noted in the previous section, it’s really easy to modify the initial version of the gallery to display its enlarged images in a fixed position on screen. Furthermore, the entire process is reduced to assigning an absolute position to the pertinent images, and nothing else.

To help you better understand how to achieve this, take a peek at the following CSS snippet; it's a breeze to grasp:  

ul#gallery {
    list-style: none;
    position: relative;
    width: 325px;
    height: 250px;
    padding: 0;
}
ul#gallery li {
    float: left;
    width: 100px;
}
ul#gallery li img {
    margin: 10px;
    cursor: pointer;
    cursor: hand;
    border: 2px solid #ddd;
    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);
}
ul#gallery li img + img {
    visibility: hidden;
    position: absolute;
    top: -10px;
    left: 320px;
    z-index: 99999;
}
#gallery li:hover img + img {
    visibility: visible;
}

As shown above, instead of being displayed next to each thumbnail, now the large pictures are hidden and shown in a fixed position, whose top and left coordinates are –10px and 320px respectively (naturally, you’re free to choose different values). Though subtle, this change allows you to create in a snap an appealing variation of the initial image gallery, while keeping its markup exactly the same.

Of course, at this point you'll want to see the revamped version's full source code. That’s exactly what I’ll show you in the next section, so keep reading.    

Listing the Image Gallery’s Full Source Code

As I promised in the section you just read, below I included the gallery’s complete source code. You can study it in detail and tweak it at will.

<!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;
    position: relative;
    width: 325px;
    height: 250px;
    padding: 0;
}
ul#gallery li {
    float: left;
    width: 100px;
}
ul#gallery li img {
    margin: 10px;
    cursor: pointer;
    cursor: hand;
    border: 2px solid #ddd;
    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);
}
ul#gallery li img + img {
    visibility: hidden;
    position: absolute;
    top: -10px;
    left: 320px;
    z-index: 99999;
}
#gallery li:hover img + img {
    visibility: visible;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Building an image gallery with CSS3 (a basic example)</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>
    
Done. Now, the next step is to give the previous example a try using your own browser (again, make sure to download the earlier set of sample images). If all works as intended, the behavior of the gallery should be quite similar to that depicted in the following snapshot:

That looks pretty engaging, doesn’t it? Of course, I’m not saying that the gallery will be a strong rival for the many full-featured ones that you’ll find out there. Regardless, I think it offers quite a few appealing features, such as a straightforward implementation, cross-browser functionality and total independence from JavaScript. All of these good factors make it worthy of your attention. 

Final Thoughts

Some say that time flies when you're having fun; that applies in this case, as we’ve come to the end of this tutorial. But hopefully, the journey has been educational; you learned how to create a customizable image gallery using only some clean, uncluttered markup along with a few straightforward CSS styles.

If you’re like me, you’re wondering if the gallery will look good when using Internet Explorer. In fact, it will. The only thing that you’ll need to take into account is that the browser won’t animate the large images, due to the lack of support for the “transition” CSS3 property. It's possible to tackle this issue with jQuery or any other popular JavaScript library, even though (in my opinion) the process isn’t really worth the hassle. 

See you in the next web design tutorial!


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