Show button on hover only
<p>I've read around and tried other solutions to my problem but none seem to work.</p>

<p>I have 3 images, each within their own 4-column div. I have a css transition set up so that these images fade from grayscale to colour when the user's mouse hovers over the image. I now need to get a button to appear on hover. I have attached an image to illustrate what I mean.</p>

<p><a href="https://i.stack.imgur.com/kg7nx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kg7nx.png" alt="enter image description here"></a></p>

<p>And here is a snippet of my HTML and CSS for the middle 4 columns.</p>

<p>---------------------<strong>HTML</strong>---------------------</p>

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

<p>---------------------<strong>CSS</strong>---------------------</p>

<pre><code>.greyish {
background: $smoke !important;
h1 {
    margin: rem-calc(100) 0 0;
}
img {
  filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ &amp; 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;
    }
  }
}
</code></pre>

<p><strong>NOTE:</strong> I am using SCSS, hence the strange-looking, nested CSS rules.</p>