翻轉時變暗圖像

我有一張需要在翻滾時變暗的圖像列表。我真的很喜歡這樣做，沒有一個臃腫的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