鼠标悬停时图像变暗：图像上方的黑条

Question

我正在使用css代码：

a.darken img {
  display: inline-block;
  -webkit-transition: all 0.2s linear; 
  -moz-transition: all 0.2s linear; 
  -ms-transition: all 0.2s linear; 
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

a.darken:hover img {
  opacity: .7;
}

和html代码：

<a class="darken" href="http://sussexbaptist.byethost7.com/sunday/">
  <img src="http://sussexbaptist.byethost7.com/wp-content/uploads/2015/02/2.jpg" alt="" width="100%" height="100%" />
</a>

变暗效果很好，但图像上方有一条黑条。有人可以帮我解决这个问题吗？

如果您想查看我的问题的实际示例，我的网站是http://www.sussexbaptist.byethost7.com