title: Trying to position a CSS circle over the top of an Image
body: <p>I have a circle image that I want to be able to cover with a CSS circle. How do I position the CSS circle so that it always matches the same height and width as the circle image?</p>
  
  <p>The image properties are as follows:</p>
  
  <pre><code>max-width: 270px;
  height: 270px;
  width: 100%;
  border-radius: 50%;
  border: none;
  </code></pre>
  
  <p>Thanks</p>
  
  <pre><code>&lt;li class=\"mis-slide\"&gt;
      &lt;a class=\"mis-container\" "&gt;
          &lt;figure&gt;
              &lt;img&gt;&lt;/img&gt;
              &lt;figcaption&gt;
                  &lt;span&gt;&lt;/span&gt;
                  &lt;div&gt;Text&lt;/div&gt;
              &lt;/figcaption&gt;
          &lt;/figure&gt;
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>