Make blog elements partially transparent

http://xomisse.com/blog/make-navigation-bar-other-blog-elements-partially-transparent

by Ellie M

HTML

<body>
    <!-- Hover over 200x200 image to see effect -->
    <img src="http://placehold.it/200x200"/>

<div id="navigationbar">
<ul>
    <li>home</li>
    <li>about</li>
    </ul>
    </div>    
    
</body>

CSS

body { background: url('http://i44.tinypic.com/2w39xzm.jpg'); }

img {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
  }

img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

#navigationbar { width: 100%; background: #FFFFFF; opacity: 0.6;
    filter: alpha(opacity=60); height: 40px; }

#navigationbar li { display: inline; float: none;  padding: 0px 10px;}