Weird round button that centers on the bottom border of an image. TODO: Convert to mixin and placeholder class

_round-button.scss

//  Markup
// <figure>
//   <img src="http://placekitten.com/g/350/244" />
//   <a href="#"></a>
// </figure>
  
  
  figure {
    $button-size: 3rem;

    position: relative;
    a {
      position: absolute;
      bottom: $button-size / 1.5;
      left: 50%;
      box-sizing: border-box;
      margin-left: -$button-size / 2;
      padding: 0;
      width: $button-size;
      height: $button-size;
      border-radius: 100%;

      background-image: url(../assets/img/Plus_symbol.svg);
      background-position: center center;
      background-size: 3.5em;
      background-color: $bold-col;
      box-shadow: 0 0 0 0.4em fade_out($bold-col, 0.7);
    }

markup.html

<figure>
  <img src="http://placekitten.com/g/350/244" />
  <a href="#"></a>
</figure>