CSS:Translucence

body { background: white url("./translucence.jpg") fixed; font: small verdana; color: lightsteelblue; padding-bottom: 20%; } body:before { content: "stylesheet by too_much green_tea"; display: block; font: bold x-small verdana; color: whitesmoke; text-align: right; margin-right: 2%; margin-top:5px; opacity: 0.5; } a { -moz-outline: none; font-weight: bold; text-decoration: none !important; } a:link { color: lightsteelblue !important; } a:visited { color: darkgray !important; } a:hover { color: gold !important; } a:active { color: tomato !important; } img { border: 0px; } table { width: 98%; } div.item { width: 20em; } h2.item-title { font: bold small verdana; position: relative; padding: 1px; margin: 0px; opacity: 0.75; } span.item-ordinal { position: absolute; left: 1em; top: 1ex; } h2.item-title a { -moz-border-radius: 8px; display: block; border: 1px solid #8cacbb; padding: 1ex 1.5em 1ex 4em; overflow: hidden; } h2.item-title a:link:after { content: " [NEW]"; display: inline; color: rosybrown; margin-left: 1em; } div.item:hover span.item-ordinal { color: ivory; } h2.item-title:active span.item-ordinal { color: gainsboro; } div.item:hover h2.item-title a { background-color: mediumseagreen; border: 1px outset #c5c8cb; color: ivory !important; } div.item:hover h2.item-title a:active { border: 1px inset #c5c8cb; color: gainsboro !important; } div.item:hover h2.item-title a:link:after { color: mediumvioletred; } div.item-desc { -moz-box-sizing: border-box; border-left:5em solid transparent; padding: 1em; position: fixed; left: 20.5em; top: 15%; width: 60%; height: 65%; overflow: auto; z-index: 4; } div.item-desc img { margin: 4px; } div.item-pubDate { -moz-box-sizing: padding-box; direction: rtl; font-weight: bold; padding: 1em 1em 1em 6em; position: fixed; left: 20.5em; top: 5%; width: 60%; height: 95%; z-index: 3; } div.item-enclosure { -moz-box-sizing: padding-box; padding: 1em 1em 1em 6em; position: fixed; left: 20.5em; top: 80%; width: 65%; z-index: 5; } div.item-duration { -moz-box-sizing: padding-box; padding: 4em 1em 1em 6em; position: fixed; left: 20.5em; top: 80%; width: 60%; height: 20%; z-index: 4; } div.item-technorati { -moz-border-radius: 16px; background-color: whitesmoke; border-top: 4px solid #f2f3f4; border-right: 4px solid #d5d8db; border-bottom: 4px solid #d5d8db; border-left: 4px solid #f2f3f4; position: fixed; left: 23em; top: 5%; width: 60%; height: 90%; z-index: 1; opacity: 0.15; } div.item-technorati a { position: absolute; bottom: 1em; right: 1em; } div.item-desc, div.item-enclosure, div.item-duration, div.item-pubDate, div.item-technorati { display: none; } div.item:hover div.item-desc, div.item:hover div.item-enclosure, div.item:hover div.item-duration, div.item:hover div.item-pubDate { display: block; opacity: 0.9; } div.item:hover div.item-technorati, div.item:hover div.item-technorati a { display: block; z-index: 2; } span.labels { font-weight: bold; padding: 0px 0.5em; }
 * 1) rss-header { width: 100%; position: relative; }
 * 2) rss-title { display: block; font: bold medium verdana; padding: 1em; width: 14em; }
 * 3) rss-link:visited { color: ivory; }
 * 4) rss-desc, #rss-copyright, #rss-image { display: none; }
 * 5) rss-header:hover #rss-desc { display: block; position: absolute; left: 23em; top: 200px; width: 60%; }
 * 6) rss-header:hover #rss-copyright { display: block; position: absolute; left: 23em; top: 500px; width: 60%; }
 * 7) rss-header:hover #rss-image { display: block; position: absolute; left: 23em; top: 40px; width: 60%; opacity: 0.7; }