How to use CSS to Create a 'Two Step' Photographic Gallery | 3

How to use CSS to Create a 'Two Step' Photographic Gallery

Step 7

Adding the :hover state

With all the thumbnails now in their correct position around the display area we can move on to styling the :hover stage of the thumbnails. Since the images aren't actually thumbnails but reduced full-size images we can enlarge them to 160px x 120px and reposition them in the middle of the display area, leaving a blank space where they were originally positioned. However, if we did this then we'd lose our mouseover link and the selected image would flicker backwards and forwards between its original position and the new position.

In order to preserve our mouseover link we must expand the size of this link to be the full width and height of the <ul*gt;

We can do this by adding padding around the link to give a total height of 336px and a total width of 448px

What's more, the selected link must now drop behind all the other links in order that it does not obscure them and stop them being selected. So we must style the selected link with a z-index that's less than 100.

This section should be fully understood before continuing to the next stage.

/* Resizing the link on hover */
#gallery a:hover {
  width:160px; 
  height:120px; 
  padding:108px 144px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:20;
  }
  • width:160px; - makes the link width bigger to hold the half linear size image.
  • height:120px; - makes the link height bigger to hold the half linear size image.
  • padding:108px 144px; - adds padding to make the overall size of the link 448px x 336px.
  • position:absolute; - allows us to absolutely position our link.
  • left:0; - moves the link to the left edge of the <ul>.
  • top:0; - moves the link to the top edge of the <ul>.
  • z-index:20; - moves the link so that it is below all the other links (on a lower layer).

‡ Example Step 7a

This example shows that you can hover over each thumbnail and make it jump to the display area and still remain hovering over the link. It also shows that you can move onto any other image and that too will jump to the display area.

We can now style the thumbnail image :hover to enlarge to 160px x 120px. I have chosen to lose the border in this resize.

/* Resizing the thumbnail on hover */
#gallery a:hover img {
  background:#eee; 
  position:relative; 
  width:160px; 
  height:120px; 
  border:0; 
  z-index:20;
  }

‡ Example Step 7b

The hover image is now enlarged to half linear size and is positioned centrally in the display area.

Step 8

Adding the :active and :focus states

Internet Explorer uses the :active pseudo class but all other browsers use to :focus pseudo class to style the mouse click.

As with the :hover style we enlarge the image area, this time to 320px x 240px and reduce the padding to 48px at the top and bottom and 64px at each side, maintaining a total size of 448px x 336px.

The clicked state of each link must also be moved further down the z-index so that it will be below the :hover stage. This will allow all links to be active and also allows the next :hover to appear on top of the 'clicked' image.

/* Resizing the link when 'clicked' */
#gallery a:active, #gallery a:focus {
  background:transparent; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }

‡ Example Step 8a

We can now style the 'clicked' image to be full size 320px x 240px.

/* Resizing the image when 'clicked' */
#gallery a:active img, #gallery a:focus img {
  background:#eee; 
  position:relative; 
  width:320px; 
  height:240px; 
  border:0; 
  z-index:10;
  }

‡ Example Step 8b

Users of Internet Explorer may now notice a bug in this arrangement whereby the full sized clicked image does not display until the mouse is moved onto another image.

This is a very curious bug and I'm not sure why it happens intermittently. Fortunately, there's an easy cure (hack) that can be applied without any problem to other browsers.

/* The 'click' hack for Internet Explorer */
a:visited {
  color:#000;
  }

Adding this global style to all links cures this problem. If anyone knows why it happens, please contact me..

‡ Example Step 8c

Step 9

Adding a background image to the list

The photograph gallery is now taking shape, but we have a large blank display area and also blank spaces left by the images as the get enlarged.

It's possible to fill these gaps with an overall background image for the <ul>.

For my example I've created an image that's in keeping with the graffiti theme and also gives an instruction to click the vacant space left by the hover stage.

background image

Of course, you can style this as desired.

Modify the following line in the existing ul#gallery style to add the background image.

/* Adding the background image */
ul#gallery {
  padding:0; 
  margin:0; 
  width:448px; 
  height:336px; 
  position:relative; 
  background:#888 url(../image/g26.jpg);
  }

‡ Example Step 9

We now have the central default image in place and when you hover over any image it gets replaced by an instruction to 'click' which will produce the full sized image.

Step 10

Opera doesn't like :focus or :active

It's true. Opera doesn't work with :active and doesn't hold the :focus state when the mouse button is clicked and released.

We can let Opera do it's thing or we can apply a hack that tells Opera to just use the :hover as a full size image and to ignore the two steps.

Yes, there is a hack that targets Opera only, it's 'valid' css but the w3c validator does not recognize it as it's only a recommendation.

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
  background:#888; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallery a:hover img {
  background:#aaa; 
  position:relative; 
  width:320px; 
  height:240px; 
  border:0; 
  z-index:10;
  }
}

ONLY Opera 7+ understands this conditional styling which just enlarges the hover link and image to 320px x 240px (the same size as the active / focus link and image).

‡ Example Step 10

If you're using Opera 7+ then you'll now see a full size image on hover, with the instruction to 'click' covered up by a grey background. The central default image is still in place and if you should click an image then you will not notice the problem.

Conclusion

Feel free to use this styling 'as is' with your own images or adapt it to use images of a different size or even a different arrangement. The only limitation is your imagination.

One last thing: a big thank-you to the photographers who supply their work 'free of charge' to the stock.xchng

About the Author

Stu's website documents his attempts at understanding and exploring the possibilities of CSS. From standard navigation links to his more bizarre experimental techniques. All of his examples are produced with JUST CSS--no javascript, or any other language, has been used in any of the examples. [Editor's note: Prepare to be amazed!] http://www.stunicholls.myby.co.uk/

Created: March 27, 2003
Revised: Sept 12, 2005

URL: http://webreference.com/programming/css_gallery2/1