Opacity not working on website but working on jsfiddle…help please

[aowokqoy]

On the right hand side I have social media icons. When you scroll over one, the others are supposed to disappear and the one you are hovering over is supposed to stay. This works on jsfiddle but not on my page. Also, when you hover the name of the icon is supposed to display above it. It does but it is very jittery, however in jsfiddle it works properly...Any thoughts?http://jsfiddle.net/gvqGk/32/The website is athttp://lolabellas.tumblr.comThanks so much!\[code\].social { list-style:none;margin:0; padding:0;}.social li { display:inline; float:left;}.social li a { display:block;width:32px; height:32px; position:relative; text- decoration:none; padding-right:-5px}.social li a strong { font-weight:normal; position:absolute; left:30px; top:-1px; color:#fff; padding:3px; z-index:9999;text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);\[/code\]}?\[code\] /* SOCIAL ICONS - CSS3 */ #css3:hover li { opacity:0.2; } #css3 li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms; } #css3 li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } #css3 li:hover { opacity:1; } #css3 li:hover a strong { opacity:1; top:-30px; } li.facebook{background:url("http://static.tumblr.com/4aqmjkd/kVVm77wsy/facebook-32x32.png" ) no-repeat; width:32px; height:32px;} li.twitter {background:url("http://static.tumblr.com/4aqmjkd/yllm77x0x/twitter-32x32.png") no-repeat; width:32px; height:32px;} li.flickr {background:url("http://static.tumblr.com/4aqmjkd/ZzZm77wzi/flickr-32x32.png") no-repeat; width:32px; height:32px;} li.pintrest {background:url("http://static.tumblr.com/4aqmjkd/9RNm77x0c/pintrest__32_x_32.png") no-repeat; width:32px; height:32px;} li.etsy {background:url("http://static.tumblr.com/4aqmjkd/lWXm77wyk/etsy_32_x_32.png") no-repeat; width:32px; height:32px;} li.contact {background:url("http://static.tumblr.com/4aqmjkd/f5om77wxr/email_32_x_32.png") no-repeat; width:32px; height:32px;} <ul class="social" id="css3"> <li class="facebook"><a href="http://www.facebook.com/lolabellasco" target="_blank"><strong>Facebook</strong></a></li> <li class="twitter"><a href="http://twitter.com/lolabellasco" target="_blank"><strong>Twitter</strong></a></li> <li class="flickr"><a href="http://www.flickr.com" target="_blank"><strong>Flickr</strong></a></li> <li class="pintrest"><a href="http://pinterest.com/lolabellas/" target="_blank"><strong>Pintrest</strong></a></li> <li class="etsy"><a href="http://lolabellas.etsy.com" target="_blank"><strong>Etsy</strong></a></li> <li class="contact"><a href="mailto:[email protected]"><strong>Contact</strong></a></li> </ul>\[/code\]