html, css, jQuery, PHP, mySQL

« | »

CSS Gallery with z-index zoom on :hover.

In this simple version of a CSS Gallery, an unordered list is used to contain anchor tags with thumbnails as background images. On hover, the images change to larger versions of the same files, overlying the rest of the list.

First, mark up a simple unordered list.

<ul>

<li></li><li></li><li></li>

</ul>

Now add anchor tags inside each list item, giving each one a class and id. In my example, I have skewed the thumbnails so that they look like scattered cards. I used three different classes for the three different levels of skew. If you don’t want your thumbnails to be skewed, you can give all of the anchor tags the same class. Make sure the ids are all unique! I simply numbered mine. The ids will be used to add the background images, and to change them on :hover. The markup sample below shows only the first three thumbnails: I repeated the class names for a longer list in the working example attached.

<ul>

<li><a class=”one” id=”first”></a></li>

<li><a class=”two” id=”second”></a></li>

<li><a class=”three” id=”third”></a></li>

</ul>

Now it is time for the CSS magic. Relatively position the unordered list (ul): the list items will be given a z-index on hover, and a relatively positioned parent element is essential for this to work. My unordered list has a width of 900px, a top margin of 150opx and is centred on the page using margin-left: auto and margin-right: auto, but your preferences and dimensions may vary. Experiment and see what looks most appealing to you.

The list items are then given list-style-type: none to remove the indents and bullet points, and are floated left to produce a horizontal list. The width and height match the sizes of my thumbnails: your dimensions may be different. I allowed my list items a 2px margin.

 ul {
  width: 900px;
  position: relative;
  margin-top: 150px;
  margin-left: auto; margin-right: auto;
  }
  li {
  list-style-type: none;
  float: left;
  width: 100px;
  height: 128px;
  margin: 2px;
  }

I will return to the list item shortly, to add a hover state. For now, add the thumbnails to the anchor tags by using their ids to give them background images. The anchor tag itself needs to be given the properties display: block and dimensions matching the thumbnail. I then added a slight box shadow:

a {
  display: block;
  width: 100px;
  height: 128px;
  background-color: white;
  border: 1px solid white;
  position: relative;
  -moz-box-shadow: 0px 2px 15px #ccc;
  -webkit-box-shadow: 0px 2px 15px #ccc;
  box-shadow: 0px 2px 15px #ccc;
  }
  #first {
  background-image: url('birds_tn.jpg');
  background-repeat: no-repeat;
  background-position: 0px 0px;
  }
  #second {
  background-image: url('dragons_tn.jpg');
  background-repeat: no-repeat;
   background-position: 0px 0px;
  }
  #third {
  background-image: url('eels_tn.jpg');
  background-repeat: no-repeat;
   background-position: 0px 0px;
  }

Now, if you would like to add the skew to the thumbnails, add transform: rotate(deg) to the classes of the anchor tags. I also varied the z-index of the anchor tags so as to achieve an overlapping effect:

 

 a.one {
  z-index: 10;
  	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
  }
  a.two {
  z-index: 100;
  	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
  }
  a.three {
  z-index: 1000;
  	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
  }

Now for the hover states …

Adding :hover

First the anchor tag itself is given a hover state. Remember that Internet Explorer only allows :hover on anchor tags – this is why the anchor tag is needed! The z-index is changed to a high value, and the skew is corrected using transform: rotate(0deg). Absolute positioning is used: you can experiment with different values until you find the correct ones for your layout. Remember that absolute positioning positions elements relative to their nearest relatively positioned parent: in this case, the list item*. They are then given negative left and top margins to draw them back over the centre line.

*the list item has relative positioning added on the hover state below: don’t panic if positioning does not work correctly at this stage, you can return to it later.

a:hover {
  background-color: gray;
  z-index:10000;
  position: absolute;
  width: 400px; height: 400px;
  top: 50%; left: 50%;
  margin-top: -200px; margin-left: -200px;
  	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);

Now change the images on the hover state, using the ids of the anchor tags:

#first:hover {
  background-image: url(birds400.jpg);
  background-repeat: no-repeat;
  background-position: 50px 0px;
  }
  #second:hover {
  background-image: url('dragons400.jpg');
  background-repeat: no-repeat;
  background-position: 50px 0px;
  }
  #third:hover {
  background-image: url('eels400.jpg');
  background-repeat: no-repeat;
  background-position: 50px 0px;
  }

Fixing the Flicker

You will notice at this stage that the image has a tendency to flicker back and forward between different states. This is because the mouse pointer is hovering over different list items/anchor tags. To fix this, we add a very high z-index to the list item on :hover. This forces it to the front, where it takes up the whole space of the image. Notice that it is at this stage that the relative positioning was added to the list item in my example.

li:hover {
  position: relative;
  z-index: 100000;
  }

Providing you have followed these instructions carefully, you should now have a fully-functional, attractive, CSS-based image gallery. A working example is viewable via the link below. Use view source in your browser to view the source code.

zoom

Tags: , , , , , , , , , , , , , ,

This entry was posted on Monday, August 29th, 2011 at 9:22 am and is filed under CSS3, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “CSS Gallery with z-index zoom on :hover.”

|
  1. CyberTramp says:

    testing

|

Leave a Reply