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>

4 comments:

akbarfajar Tuesday, 27 June, 2006  

great jeff thank's for the informations i got the flashing validated code it was from your blog salam sukses bro..

jeff Tuesday, 27 June, 2006  

thanks akbar, but that is written by Daniel Duris. not me. i just use it.

Tina Thursday, 29 June, 2006  

Wahhh, asyikk.. makasih ya mas, mau langsung aku praktekin nih, huehuee..

Sering2 posting model gini yaakk..

jeff Friday, 30 June, 2006  

thanks, tapi ini juga nyontek, Tina.

Post a Comment

Powered by Blogger.