Pure CSS-driven transparent footer v0.02

Do you like the bottom bar on this blog? Here is the code :




1. CSS changes (Just add the following code at the bottom of you CSS file)

.footerFloat {
position: fixed;
border-top: 2px solid #ddd;
border-bottom: 2px solid #f5f5f5;
background:url(http://farm2.static.flickr.com/1091/1253144884_bff120573e.jpg?v=0) #f5f5f5;
width: 100%;
left: 0px;
bottom: 0px;
text-align:middle;
color: #aaa;
font-size: 10px;
z-index:8000;
opacity:0.7;
filter:alpha(opacity:70);
}

.footerFloatH {
position: fixed;
border-top: 2px solid #ddd;
border-bottom: 2px solid #f5f5f5;
background:url(http://farm2.static.flickr.com/1091/1253144884_bff120573e.jpg?v=0) #f5f5f5;
width: 100%;
left: 0px;
bottom: 0px;
text-align:middle;
color: #aaa;
font-size: 10px;
z-index:8000;
opacity:0.9;
filter:alpha(opacity:90);
}

2. HTML changes - Add this HTML just before your </body> tag.

<div class='footerFloat' onmouseout='this.className="footerFloatH"' onmouseover='this.className="footerFloat"'>
<!-- start your stuff -->
/*Your own stuff ...*/
<!-- end your stuff-->
</div>