The "Come Up" CSS Trick

It seems like I embed a flash file for this blog's header, but actually not. If this "come up" is hovered, a flying bird comes up and moving around. I actually use a CSS trick from DynamicDrive.com.

Below is the trick, and the key is that the image file has to be a transparent animation image.

The CSS:

.thumbnail {
position: relative;
z-index: 0;
}

.thumbnail :hover {
background-color: transparent;
z-index: 50;
}

.thumbnail span { /*CSS for enlarged image*/
position: absolute;
background: transparent; /*important*/
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img { /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

The XHTML:

Only when I
<a class="thumbnail" href="#thumb">come up<span>
<img src="http://transparent animation" alt="" /></span></a>
with <a href="http://anymatters.blogspot.com">any matters.</a>