Grey box appearing on image link with opacity - html

Question

First question on Stack Overflow so if I am missing anything you need just ask and I'll do my best to provide it.
Basically I have a set of images that are acting as links to websites, when you hover over them there is an opacity effect (goes to 0.7). This is fine but when you hover and the opacity kicks in a grey box appears in the middle, I am assuming this is due to it being a link with an anchor tag.
My question is how do I get rid of that grey box? See below for images and code:
HTML for images
<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>
This is css for images
#our_work img {
width:400px;
height:400px;
display: inline-block;
height: auto;
max-width: 100%;
}
CSS for hover over images
#our_work img:hover {
opacity: 0.7;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
IMAGE BEFORE HOVER - http://i.stack.imgur.com/Yqx8N.png
IMAGE WITH HOVER AND GREY BOX - http://i.stack.imgur.com/VNDjD.png
Anything else you need to help let me know!

Answer 1

So as per my comment above in response to Webber, I found the cause of this (for me) was because when changing the colour of the navbar hover effect I was also targeting all anchor tags. This isn't usually noticeable but with the opacity effect this became visible. I changed my code to the following:
From:
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, a:hover {
background-color:grey !important;
}
To:
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, #main_nav a:hover {
background-color:grey !important;
}