画像のリンクに不透明度のある灰色のボックスが表示される

Question

最初にスタックオーバーフローに関する質問があるので、何か不足している場合は質問してください。

基本的には、ウェブサイトへのリンクとして機能する一連の画像があります。マウスオーバーすると不透明効果（0.7になる）があります。これは問題ありませんが、マウスを動かすと灰色のボックスの不透明度がキックされて中央に表示されますが、これはアンカータグとのリンクであると想定しています。

私の質問は、どのように私はその灰色のボックスを取り除くのですか？画像とコードについては、以下を参照してください：

HTML画像

<div class="col-md-4 centered paddedBottom"> 
       <p class="uppercase">Angela Macaulay Therapies</p> 
       <a href="http://angelamacaulaytherapies.uk" target="_blank">         
       <img src="images/angelamacaulaytherapies.png" /></a> 
</div> 

用ホバーのためのこの画像のCSSです

#our_work img { 
width:400px; 
height:400px; 
display: inline-block; 
height: auto; 
max-width: 100%; 
} 

CSS HOVER前の画像

#our_work img:hover { 
opacity: 0.7; 
filter: alpha(opacity=100); /* For IE8 and earlier */ 
} 

画像の上に - http://i.stack.imgur.com/Yqx8N.png

ホバーとグレーボックスの画像 - http://i.stack.imgur.com/VNDjD.png

私に知らせるために必要なものは何ですか？

Answer 1

Webberに反応して上記のコメントがありましたが、これは（私にとって）navbar hoverの効果の色を変更するとすべてのアンカータグも対象にしていたからです。これは通常は目立たないが、不透明効果でこれが見えるようになった。

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, a:hover { 
    background-color:grey !important; 
} 

：から

：私は次の私のコードを変更し

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, #main_nav a:hover { 
    background-color:grey !important; 
}