/* Clean hover blue style for Sage by Eliot */ html { /*background-color: #F5F0F0 ;*/ background-image: -moz-linear-gradient(bottom right,#EAEAEA, #F5F0F0, #F5F0F0); } body { font-size: 80%; font-family: "Lucida Grande", Verdana, Arial, Sans-Serif; margin:0px; padding:0px; -moz-box-sizing: border-box; } a { font-weight: bold !important; } p { text-align: justify; line-height: 1.5em; } #rss-header { left: -5px; top: 0; width: 104%; height: 74px; position: fixed; background: #283C72; border-bottom: solid 2px #F3EFFF ; -moz-box-shadow: 0px 2px 10px #000; z-index:100; display:block; } #rss-title { position: absolute; display: block; } h1 { left : 10px; font-size: large; font-family: 'Trebuchet MS'; color: red; text-decoration: none; } #rss-link { position: fixed; top: 14px; left : 6px; font-size: 28px; text-shadow: 0px 0px 2px #005; color: white; display: block; -moz-outline: none; font-weight: bold; text-decoration: none; } #rss-desc { display: block; position: fixed; top: 38px; left:6px; font-size: 11px; color: white; height:15px; max-width: 99%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #rss-copyright, #rss-image { display: none; } .item { position: relative; top: 76px; width: 250px; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:2px; border-style:solid; border-width:0px; background-color: #283C72; color: #F5F0F0; z-index:0; display: block; } h2.item-title { position: relative; top: 3px; width: 250px; padding: 0px; font-size: 11px; font-family: arial; display:block; } h2.item-title a { color: white; text-decoration: none; } span.labels { font-weight: bold; padding: 0px 0.5em; } .item-desc { -moz-box-sizing: border-box; position: fixed; top:0px; left: 0px; height:100%; width:100%; clip:rect(auto, auto, auto, 258px); padding-top:10px; padding-bottom:10px; padding-right:15px; padding-left:274px; color: black; /*background-color: #F5F0F0;*/ background-image: -moz-linear-gradient(bottom right,#EAEAEA, #F5F0F0, #F5F0F0); border-style:solid; border-color:#F5F0F0; border-top-width:77px; border-right-width:0px; border-left-width:0px; border-bottom-width:1px; overflow-y: auto; overflow-x: hidden; z-index:1; display: none; } .item-desc a{ -moz-outline: none; color:#3A5DAa; font-weight: bold; text-decoration: none; } .item-author , .item-pubDate { padding-right: 1px; font-size: 10px; font-family: arial; text-align:right; color:#3A5DAa; display: none; } .item-enclosure { padding: 0px 3px; font-family: arial; font-size: 10px; color: white; } .item-enclosure a{ color: white; text-decoration: none; font-weight: bold; } img { -moz-box-sizing: border-box; position: inherit; max-width:100%; width:auto; height:auto; display:none; } .item:hover { position: relative; width: 250px; padding-left:6px; padding-top:2px; padding-bottom:2px; border-bottom-width:1px; border-left-width:2px; border-color:#1F2E56; color: #3A5DAa; background-color: #F5F0F0; -moz-box-shadow: -5px 3px 4px rgba(0, 0, 0, 0.4); z-index:1; } .item-enclosure img, .item-technorati, .item-duration {display: none;} .item:hover .item-enclosure ,.item:hover .item-title, .item:hover .item-enclosure a, .item:hover h2.item-title a{ color: #3A5DAa;} .item:hover .item-desc, img,.item:hover .item-desc img,.item:hover .item-duration ,.item:hover .item-technorati, .item:hover .item-author, .item:hover .item-pubDate{ display: block;} .item-enclosure a:hover, .item-desc a:hover { text-decoration: underline; } /* -- small adfilter, optional -- */ a:link[HREF*="googleadservices"], a:link[HREF*="ads_by_google"] { display: none !important; } img[SRC*="feedburner.com/~a"], img[SRC*="feedster"] { display: none !important; } a:link[HREF*="flattrss"] { display: none !important; } hr {display:none;} .feedflare {display:none;} #terminator {display:none;} .tweetmeme_button {display:none;}
CSS: Clean hover blue[]
by Eliot.
Based on translucence (by too_much green_tea). The text appears when you hover over an item.
Enjoy !
download