Scince I take the time to finish my personal website I always come up with some thoughts about several things I could tune, some effects I should ad. When such thoughts come up most of the time I have no idea how to do it and that means I have to search the web and hope I find somewhere someone who already did what I want to do. Well I’m glad that the web is full of stuff and a lot of talented web developers/designers already did a lot of awsome stuff. But sometimes I don’t find what I want or I just want to do it by myself or whateva! In this case here I adjusted something, someone else already made.

Thought

Well, I wanted a shadow effect for my picture gallery. The small pictures in my image gallery should cast a realistic shadow on mouse hover. Where to find that effect? Well I have no idea. But I found something I could use on Adrian Pelletiers blog right here -> KABOOM

Procedure

I will do the HTML, do the CSS, draw a shadow picture, which I use as the shadow for the shadow effect and finaly do the JS using jQeury to achieve the realistic shadow effect on mouse hover. Actualy I won’t do this all by myself except the HTML, and the shadow picture(I use the words shadow to often). Most of the stuff is already done by Adrian and is just reused and changed by me. Let’s get it on!

HTML

I use <div>’s like in the image gallery on my website. We need three main elements: a box which will cast the shadow, a shadow which will be cast by the box and and element which surrounds both, so we can copy this surrounding element and use the shadow effect several times. I use the class=”box1″..class=”box5″ as my objects which will cast the shadows, and a <img> linked to the shadow image which will be added later with JS. The class=”box_wrapper” is the surrounding element.

It’s pretty streight forward as you see in the code below.

<div id="main_wrapper">
  <div class="box_wrapper">
    <a class="box1" href="#"></a>
  </div>
    ...
  <div class="box_wrapper">
    <a class="box5" href="#"></a>
  </div>
  <div style="clear: both;"></div>
  <div class="box_wrapper">
    <a class="box1" href="#"></a>
  </div>
    ...
  <div class="box_wrapper">
    <a class="box5" href="#"></a>
  </div>
  <div style="clear: both;"></div>
</div>

CSS

First I will start with the easy part. The div#main_wrapper is just used for alignment.

div#main_wrapper
{
  width: 360px;
  margin: 0px auto;
  padding: 10px;
}

The div.bow_wrapper have to be positioned relative and floated to the left. Don’t forget to clear after the floated elements (as you see in the HTML example after the box5 classes) or your design will do strange things in all the different browsers.

div.box_wrapper
{
  float: left;
  position: relative;
  margin: 10px;
}

Now lets add some properties to the box elements. I want to use the boxes as hyperlinks so I took the <a> tag and because of that I need to change the display preperty to block or adding height and width to the <a> tag will be useless. The position property is relative and the z-index is 2 (more about that below).

a.box1, a.box1:hover, a.box1:visited,
a.box2, a.box2:hover, a.box2:visited,
a.box3, a.box3:hover, a.box3:visited,
a.box4, a.box4:hover, a.box4:visited,
a.box5, a.box5:hover, a.box5:visited
{
  height: 50px;
  width: 50px;
  border: 1px solid #666666;
  display: block;
  position: relative;
  z-index: 2;
}

a.box1{ background-color: #FD7400; }
a.box2{ background-color: #FFE11A; }
a.box3{ background-color: #BEDB39; }
a.box4{ background-color: #1F8A70; }
a.box5{ background-color: #004358; }

I want to hide each shadow image behind each box. Earlier I positioned the parent class box_wrapper relative and now I set the position property of the shadow image to absolute. The effect is that the base position of the shadow image element with absolute positioning is positioned relative to its parent element box_wrapper.

(more about the positioning property > KABOOM)

So the last three steps are: setting the bottom and left value to 0 and the z-index to 1. Again earlier we set the z-index for the boxes to 2. The effect here is that the shadow image will be behind the box.

(more about the z-index property > KABOOM).

div#main_wrapper img.shadow
{
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

Javascript and jQuery

Basicly this part is nearly the same as Adrians. First I add the shadow image inside every box_wrapper class with the same size as the boxes. It won’t be be visible by now.
The second part is the animation on mouse hover. There are two functions inside hover. The first function animate the box by moving it up and changes the size of the shadow image when the mouse curser is above the box. The second function restore the previous position by moving the box down and reset the shadow image size to previous values when the mouse curser leave the box.

//Begin jQuery
$(document).ready
(
  function()
  {
    //Append shadow image
    $(".box_wrapper").append
    (
      '<img class="shadow" src="shadow.png" width="52" height="52" alt="" />'
    );

    //Animate buttons, shrink and fade shadow
    $(".box_wrapper").hover
    (
      function()
      {
        var e = this;

        $(e).find("a").stop().animate({marginTop: "-2px"}, 180);

        $(e).find("img.shadow").stop().animate({width:        "72px",
                                                height:       "72px",
                                                marginLeft:   "-10px",
                                                marginBottom: "-10px"}, 180);
      },
      function()
      {
        var e = this;

        $(e).find("a").stop().animate({marginTop: "0px"}, 180);

        $(e).find("img.shadow").stop().animate({width:        "52px",
                                                height:       "52px",
                                                marginLeft:   "0px",
                                                marginBottom: "0px"}, 180);
      }
    );
  }
);
// End jQuery

Watch the DEMO.
Download the EXAMPLE.