title: Edit Button on Hover
body: <p>Currently I have a container with a hover overlay that darkens the entire container. I wish to show an edit button alongside the overlay right in the middle.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.service-inner {
    text-decoration: none;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: pale-grey;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  .service-inner:hover &gt; .overlay {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background-color: black;
    opacity: 0.8;
    z-index: 100;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="service-inner"&gt;
    &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What would be the best way to go about this?</p>