翻转时变暗图像

我有一张需要在翻滚时变暗的图像列表。我真的很喜欢这样做，没有一个臃肿的CSS翻转技术，因为任何时候花在Photoshop上使我非常高兴。我得到了部分途径，但出现了一些问题。这是直播：翻转时变暗图像

CODE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>Darken</title> 
<style type="text/css"> 
#topnav { 
    float:left; 
    margin:22px 0 0 50px; 
    list-style:none; 
} 
.kitchy { 
    background-color:#000000; 
    width:112px; 
    height:203px; 
} 

#topnav a:hover{ 
    opacity:.6; 
} 

#topnav li { 
    display:inline; 
} 
</style> 
</head> 

<body> 
<ul id="topnav"> 
      <li class="kitchy"><a href="#"><img src="img/kitch.jpg" /></a></li> 
      <li><img src="img/deck_small.jpg" /></li> 
      <li><img src="img/door_small.jpg" /></li> 
      <li><img src="img/lumber_small.jpg" /></li> 
      <li><img src="img/tools_small.jpg" /></li> 
      <li><img src="img/paint_small.jpg" /></li> 
     </ul> 
</body> 

</html>

来源

2011-03-09 Davey

这是怎么回事：

JSFiddle

我改变什么：

<ul>和<li>到<div>。新增kitchy类所有菜单项，

改变了这个CSS：

#topnav { 
    float:left; 
    margin:22px 0 0 50px; 
    list-style:none; 
} 
.kitchy { 
    background: #000; 
    width:112px; 
    height:103px; 
    float:left; 
    margin:5px; /*Optional*/ 
} 

#topnav a:hover{ 
    opacity:.5; 
}

来源

2011-03-09 17:06:22

不错！这正是我正在寻找的。看起来像显示内联导致了麻烦。谢谢您的帮助！ – Davey 2011-03-09 17:14:05