title: Show button on hover only
body: <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>