Bobo's DIV+CSS Effect
By Jian Shuo Wang on 2006-07-06 23:51 · My HobbiesBobo created interesting CSS+DIV effect on his blog as an experiment. I found it very funny. The key is, he didn’t use a single line of Javascript - Just the CSS and DIV. Check the result below. Cautious, this CSS+DIV messed up the whole UI of this blog. Don’t worry about it.
Now, most members of Kijiji has his/her own blog. Here is a not-complete list: Jia
#info p{position:absolute;width:523px;height:275px;top:115px; left:10px;background-image: url(http://home.wangjianshuo.com/archives/2006/07/06/x20067613517.gif);visibility: hidden;}
#w01 a:hover p,#w02 a:active p{background-position: 0px 0px; visibility: visible;}
#w02 a:hover p,#w03 a:active p{background-position: 0px -275px; visibility: visible;}
#w03 a:hover p,#w04 a:active p{background-position: 0px -550px;visibility: visible; }
#w04 a:hover p,#w05 a:active p{background-position: 0px -825px; visibility: visible;}
#w05 a:hover p,#w06 a:active p{background-position: 0px -1100px; visibility: visible;}
#w06 a:hover p,#w07 a:active p{background-position: 0px -1375px; visibility: visible;}
#w07 a:hover p,#w08 a:active p{background-position: 0px -1650px; visibility: visible;}
#w08 a:hover p,#w09 a:active p{background-position: 0px -1925px; visibility: visible;}
#w09 a:hover p,#w10 a:active p{background-position: 0px -2200px; visibility: visible;}
#w10 a:hover p,#w11 a:active p{background-position: 0px -2475px; visibility: visible;}
#w11 a:hover p,#w12 a:active p{background-position: 0px -2750px; visibility: visible;}
#w12 a:hover p,#w13 a:active p{background-position: 0px -3025px;visibility: visible; }
#info div div{width:44px; height:100px;display:block; background:#cc0000;}
Move your mouse on red