title: Transform scale change position element after in hover
body: <p>I try using <code>transform:scale(1.2)</code> to obtain the effect of an appearing circle around the icon. <code>transform</code> I added to the <code>.icon-style:hover::after</code>.</p>
  
  <p><strong>Now this code is commented, please uncomment this code to see what I want to get.</strong> </p>
  
  <p>For example I trying doing something like this: <a href="https://tympanus.net/Development/IconHoverEffects/#set-1" rel="nofollow noreferrer">click</a>. But <code>scale</code> change position circle.</p>
  
  <p>I read this <a href="https://stackoverflow.com/questions/18943773/css-wrong-position-of-transform-scale-container-children">article</a>, but I don't now how to use <code>transform-origin</code> in my CSS.</p>
  
  <p>Demo: <a href="https://jsfiddle.net/fkhuce62/1/" rel="nofollow noreferrer">JSFiddle</a> </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>*{
      background-color: black;
  }
  .pos-footer {
      position: absolute;
      bottom: 20px;
      right: 30px;
  }
  .icon-social {
      display: flex;
  }
  .icon-social-pos {
      position: relative;
  }
  .icon-style {
      position: relative;
      background-repeat: no-repeat;
      background-position: center; 
      width: 30px;
      height: 30px;
      background-color: rgba(255, 255, 255, 0.25);
      padding: 10px;
      border-radius: 50%;
      transition: background-color .3s ease-in-out;
  }
  .icon-style:hover {
      background-color: rgba(255, 255, 255, 0.7);
  }
  .icon-style::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      width: 100%;
      height: 100%;
      border: 5px solid rgba(255, 255, 255, 0.425);
      border-radius: 50%;
      padding: 7px;
      opacity: 0;
      transition: all .4s ease-in-out;
  }
  .icon-style:hover::after {
      opacity: 1;
      /* transform: scale(1.2); */
  }
  .icon-github {
      background-image: url("https://img.icons8.com/windows/30/000000/github.png");
      margin-right: 10px;
  }
  .icon-linkedin {
      background-image: url("https://img.icons8.com/ios-glyphs/22/000000/linkedin-2.png");
      margin-left: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pos-footer"&gt;
      &lt;div class="icon-social"&gt;
          &lt;a href="#"&gt;
              &lt;div class="icon-social-pos"&gt;
                  &lt;div class="icon-style icon-github"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/a&gt;
          &lt;a href="#"&gt;
              &lt;div class="icon-social-pos"&gt;
                  &lt;div class="icon-style icon-linkedin"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>