仅在悬停时显示按钮

我已阅读并尝试了其他解决方案，但似乎都没有用。

我有3张图片，每个图片都在自己的4列div中。我设置了一个css过渡，以便当用户的鼠标悬停在图像上时，这些图像从灰度渐变为彩色。我现在需要使按钮出现在悬停上。我已附上图片以说明我的意思。

这是中间4列的HTML和CSS片段。

--------------------- HTML ---------------------

<div class="small-4 columns">
    <img src="/wp-content/themes/adamslaw/assets/img/woman.png">
    <a class="button" href="/jane/">View Jane's Profile</a>
</div>

--------------------- CSS ---------------------

.greyish {
background: $smoke !important;
h1 {
    margin: rem-calc(100) 0 0;
}
img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
  .button:hover {
    display: inline-block;
    }
  }
}

注意：我正在使用SCSS，因此使用了看起来很奇怪的嵌套CSS规则。