title: CSS Hover Not Centering
body: <p>I am creating a div which will enclose a users name and when they hover over a profile image then it will display the name over the image, when I am doing this it does not center the div over the image solely which will be causing a problem when styling the website.</p>
  
  <p>My CSS is below:</p>
  
  <pre><code>.miniProfileImage {
      border-radius: 100%;
      border: 3px dashed #28A745;
      width: 100%;
      max-width: 200px;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
      opacity: 1;
      display: block;
  }
  
  .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;    
  }
  
  .img-container {
      position: relative;
      width: 50%;
  }
  
  .img-container:hover .miniProfileImage {
      opacity: 0.3;
  }
  
  .img-container:hover .middle {
      opacity: 1;
  }
  
  .middleText {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
  }
  </code></pre>
  
  <p>A sample HTML mark-up can be seen here:</p>
  
  <pre><code>&lt;div class='img-container'&gt;               
    &lt;img class='miniProfileImage' src='http://via.placeholder.com/500x500'&gt;
    &lt;div class='middle'&gt;
      &lt;p class='middleText'&gt;Some Name&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>I have also created a JS Fiddle to represent what is happening</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>.miniProfileImage {
      border-radius: 100%;
      border: 3px dashed #28A745;
      width: 100%;
      max-width: 200px;
      height: auto;
      transition: .5s ease;
      backface-visibility: hidden;
      opacity: 1;
      display: block;
  }
  
  .middle {
      transition: .5s ease;
      opacity: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;    
  }
  
  .img-container {
      position: relative;
      width: 50%;
  }
  
  .img-container:hover .miniProfileImage {
      opacity: 0.3;
  }
  
  .img-container:hover .middle {
      opacity: 1;
  }
  
  .middleText {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='img-container'&gt;               
    &lt;img class='miniProfileImage' src='http://via.placeholder.com/500x500'&gt;
    &lt;div class='middle'&gt;
      &lt;p class='middleText'&gt;Some Name&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>