CSS Tutorial: Image with Toolbar and Navigation Overlay

In this tutorial I will show you how to create an overlay toolbar and navigation for an image. This type of technique can, for example, be applied in an image gallery where you want to provide some options for the user when he is viewing your images.

The result of this tutorial will look like this:

As you can see, we will create a toolbar with icons and a navigation bar. In the end we will use some JavaScript (jQuery) in order to make the bars appear and disappear again.

The icons we will be using for this tutorial belong to the incredible Milky icon set. Please visit the site to get the complete icon set by Frexy.

1. The HTML Structure

Let’s start by the HTML structure. We will need three main elements inside of a wrapper or container:

1. upper toolbar with 8 tool icons
2. navigation with previous and next icon, and a price tag
3. the image itself

The upper toolbar will be an unordered list:

<ul class="toolbar">
 <li><a class="zoomin"></a></li>
 <li><a class="zoomout"></a></li>
 <li><a class="shop"></a></li>
 <li><a class="fav"></a></li>
 <li><a class="edit"></a></li>
 <li><a class="label"></a></li>
 <li><a class="info"></a></li>
</ul>

The navigation bar will be a simple div looking like this:

<div class="navigation">
 <a class="previous"></a>
 <a class="next"></a>
 <span class="price">$ 0.99</span>
</div>

Put into a wrapper or container and adding the image we will have a structure like this:

<div class="image_container">
 <ul class="toolbar">
  <li><a class="zoomin"></a></li>
  <li><a class="zoomout"></a></li>
  <li><a class="shop"></a></li>
  <li><a class="fav"></a></li>
  <li><a class="edit"></a></li>
  <li><a class="label"></a></li>
  <li><a class="info"></a></li>
 </ul>
 <img src="example.jpg" alt="example" width="500" height="375"/>
 <div class="navigation">
  <a class="previous"></a>
  <a class="next"></a>
  <span class="price">$ 0.99</span>
 </div>
</div>

2. The CSS

Now we will add some style to the classes of the HTML elements. The image container shall look like a frame with a neat shadow around. This we can reach with the CSS3 box shadow property that will not work in Internet Explorer, but which will give a nice effect in e.g. Firefox and Chrome. The styling for the container will be the following:

.image_container{
 width:500px;
 height:375px;
 padding:5px;
 background-color:#f7f7f7;
 border:1px solid #ccc;
 -moz-box-shadow: 0 1px 3px #777;
 -webkit-box-shadow: 0 1px 3px #777;
 margin:40px auto;
}

The image that we are going to use will be 500 pixel wide and 375 pixel high, so we will make the container around it the same size. For the border effect we will not simply add a border, but a background color and some padding. You see, this allows you to add two borders to an image: one is created by the padding and the other by the border.

With setting the left and right margin to auto, we center the div vertically on the page. Remember the order for the short CSS version: TOP RIGHT BOTTOM LEFT. If you just have two values it is: TOP+BOTTOM RIGHT+LEFT.

Let’s continue by styling the unordered list for the icons.

Because we want it to appear on top of the image, we need to make the position of the unordered list absolute:

ul.toolbar{
 position:absolute;
 width:500px;
 height:52px;
 margin:0px;
 padding:0px;
 background-color:#fff;
 border-bottom:2px solid #ccc;
 list-style-type:none;
}

When styling lists, it is always important to keep in mind that they have a default margin and padding. In this example, we don’t want it to have any of these, so we set them to zero. The list-style-type should be none, since we don’t want any little bullet next to our list items.

Now, we want to make the list being in a line. That we need to define in the list elements:

ul.toolbar li{
 display:inline;
}

When coding CSS, we always want to try to write compact classes and not repeat everything for similar elements. All the a elements in our list will have a different icon, so we need to create different classes for them. But, they will also have many properties in common. So, the first step we take, is to define these common properties for the general case:

ul.toolbar li a{
 float:left;
 cursor:pointer;
 width:70px;
 height:52px;
 opacity: 0.6;
}

The icon itself is 48 pixels wide and high, but we want to give the buttons that we create out of the icons a little bit more space. When styling link elements, one should always keep in mind that they only change the mouse cursor to a little hand, when there is a href in them. In our case we will not have a link address, so we set the cursor property to pointer. The icons should be a little bit transparent, so we set the opacity to 0.6. We want them to become opaque when we hover over them, so we define:

ul.toolbar li a:hover{
 opacity: 1.0;
}

Now we can define the classes for the icons:

a.label{
 background:#fff url(icons/label.png) no-repeat center center;
}
a.fav{
 background:#fff url(icons/favorite.png) no-repeat center center;
}
a.shop{
 background:#fff url(icons/shopping_cart.png) no-repeat center center;
}
a.zoomin{
 background:#fff url(icons/zoom_in.png) no-repeat center center;
}
a.zoomout{
 background:#fff url(icons/zoom_out.png) no-repeat center center;
}
a.fullscreen{
 background:#fff url(icons/fullscreen.png) no-repeat center center;
}
a.info{
 background:#fff url(icons/info.png) no-repeat center center;
}
a.edit{
 background:#fff url(icons/edit.png) no-repeat center center;
}

With this styling we are done with the upper toolbar.
The navigation div will have a similar style to the unordered list:

.navigation{
 width:500px;
 height:52px;
 position:absolute;
 margin-top:-58px;
 border-top:2px solid #ccc;
 background-color:#fff;
}

The margin-top gets a negative value because we want to pull the navigation bar up to appear on top of the image. (When making the container relative, we could as well just say e.g. left:0px and bottom:0px.)
The two arrows for the navigation will have the following styling:

a.previous{
 float:left;
 background:#fff url(icons/prev.png) no-repeat center center;
}
a.next{
 float:right;
 background:#fff url(icons/next.png) no-repeat center center;
}

Since these elements will as well have the same styling like the a elements in the upper toolbar, we will just add the class to the already existing css:

ul.toolbar li a, .navigation a{
 float:left;
 cursor:pointer;
 width:70px;
 height:52px;
 opacity: 0.6;
}

Last but not least, we have the price tag, which has the following styling:

span.price{
 position:absolute;
 color:#888;
 font-weight:bold;
 font-size:26px;
 margin:10px 0px 0px 140px;
}

The margin of the absolute positioned element allows to position it relative to the containing element. Using e.g. top or left would position an absolute element relative to the page itself.
So, now we are done with the markup and styling and ready to add some magic.

3. The JavaScript

We want the toolbar and navigation to appear only when we hover over the image. Further, we want that, when passing over one of the bars, they become opaque.
To achieve these effects we will simply use jQuery. First, we will need to add style for another class to the CSS which will make elements transparent:

.transparent{
 opacity: 0.6;
}

We will add this class to the toolbar and the navigation. Additionally, we will add a style tag saying that the elements should be invisible:

<div class="image_container">
 <ul class="toolbar transparent" style="display:none;">
  <li><a class="zoomin"></a></li>
  <li><a class="zoomout"></a></li>
  <li><a class="shop"></a></li>
  <li><a class="fav"></a></li>
  <li><a class="edit"></a></li>
  <li><a class="label"></a></li>
  <li><a class="info"></a></li>
 </ul>
 <img src="example.jpg" alt="example" width="500" height="375"/>
 <div class="navigation transparent" style="display:none;">
  <a class="previous"></a>
  <a class="next"></a>
  <span class="price">$ 0.99</span>
 </div>
</div>

Since we will use some JavaScript functions acting on the elements, we need to identify them with unique ids:

<div class="image_container" id="img_cont">
 <ul class="toolbar transparent" id="tlbar" style="display:none;">
  <li><a class="zoomin"></a></li>
  <li><a class="zoomout"></a></li>
  <li><a class="shop"></a></li>
  <li><a class="fav"></a></li>
  <li><a class="edit"></a></li>
  <li><a class="label"></a></li>
  <li><a class="info"></a></li>
 </ul>
 <img src="example.jpg" alt="example" width="500" height="375"/>
 <div class="navigation transparent" id="nav" style="display:none;">
  <a class="previous"></a>
  <a class="next"></a>
  <span class="price">$ 0.99</span>
 </div>
</div>

In the head of the document, we need to add a link to the jQuery script:

<script type="text/javascript" src="jquery-1.3.2.js"></script>

Now we can define some functions before the closing body tag:

<script>
$(function() {
 $('#img_cont').hover(
   function () {
    $('#tlbar').slideDown(200);
    $('#nav').slideDown(200);
   },
   function () {
    $('#tlbar').slideUp(200);
    $('#nav').slideUp(200);
   }
 );
 $('#tlbar,#nav').hover(
  function () {
   $(this).removeClass('transparent');
  },
  function () {
   $(this).addClass('transparent');
  }
 );
});
</script>

We define that we want the toolbar and the navigation bar to appear “sliding down” very quickly (200 milliseconds) whenever we hover over the the image container. Then, when hovering over one of the elements, we want them to become opaque. That we achieve by removing the transparent class.
And that’s  it!