Create A CSS3 Animated Gallery With Persistent Images

Yesterday a commenter asked how to alter the Simple CSS Gallery example to feature a persistent image: that is, present a “default” large-format image to a visitor when they first enter the page. There are two methods I am aware of to achieve that using pure CSS, with the slight caveat that the first technique, shown in this article, needs a tiny bit of JavaScript to get close to being bulletproof.

While solving this issue, I thought I’d use the opportunity to answer another common question of interface: “how do I make the gallery act when a user clicks on a thumbnail image, rather than hovering over it?”

We’re going to use a number of CSS tricks to achieve the result we’re after, but the markup itself is fairly simple:

<div id=gallery-switch>

<a href=#curl-girl><img src=thumbnails/wave-swept-girl.jpg alt="Wave-swept girl"></a>

<a href=#curl><img src=thumbnails/wave-curl.jpg alt="Wave curl"></a>

<a href=#aussie><img src=thumbnails/bronzed-aussie.jpg alt="Bronzed Aussie"></a>

</div>

<div id=gallery-base>

<figure id=curl-girl>

<img src=wave-swept-girl.jpg alt="Wave-swept girl">

<figcaption>Swept Away</figcaption></figure>

<figure id=curl>

<img src=wave-curl.jpg alt="Wave curl">

<figcaption>Rip Curl</figcaption>

</figure>

<figure id=aussie>

<img src=bronzed-aussie.jpg alt="Bronzed Aussie">

<figcaption>Bronzed</figcaption>

</figure>

</div>

As you can see, the markup is very different from the Simple CSS gallery: linked thumbnails in one div, and figure elements in another, each containing the large version of the thumbnail images. For the purpose of this exercise, the important part is the correspondence between the href attribute values in the first div and the id values on each figure in the second. This creates anchor links; we’re going to use CSS to enhance this attachment. I’ll keep things current by making the gallery responsive, using percentages and rem units for measurements:

div#gallery-switch { font-size: 0; width: 16%; float: left; }

div#gallery-switch a { display: block; float: left; width: 100%; }

div#gallery-switch img, div#gallery-base img { max-width: 100%; }

(I’ve added font-size: 0to remove every last space between the linked images within the gallery-switch div)

div#gallery-base { margin-left: 20%; width: 70%; position: relative; }

div#gallery-base figure { position: absolute; opacity: 0; padding-top: 2em; transition: .5s opacity linear; width: 100%; color: #fff; }

Naturally, you’ll need to add vendor prefixes to the transition property to make it work in other browsers.

The CSS that makes the “on click” action work is the use of the :target pseudo-selector:

div#gallery-base figure:target { opacity: 1; }

I’ve avoided the “jump” normally associated with the use of anchor links and :target by placing padding-top in the figure to push down the large images; you’ll still see a jump when the large image starts off-screen, but I’d consider that an acceptable behavior.

None of this sets up a default image. Because the gallery can’t generate a persistent image for itself, the “greeting” image is chosen by the URL you use to link to the page.

For example, using the following URL:

http://demosthenes.info/blog/642/Create-A-CSS3-Animated-Gallery#curl

…will present the “wave curl” image by default. This has a number of advantages: while the gallery might cover many kinds of subject material, you could send different targeted links to different clients: a link that brings up a full-size 3D render on the gallery page to a gaming company, for example, while an art studio might receive a link that delivers a painting as the default image. Similarly-formatted links could be used within a site to direct visitors towards different aspects of the gallery.

This doesn’t entirely solve the problem, however, which you’ll see when you view this article in different contexts: following this article from Google search results, for example, will not bring up a default image, as Google does not record hashes in URLs as a general rule. I’ll address that issue in a separate article.