Bobo's DIV+CSS Effect

By Jian Shuo Wang on 2006-07-06 23:51 · My Hobbies

Bobo 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

Livid

Dengjia

Kijiji blog

Joanna

York

Victor

#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