Rescaling and wrong colors after using transform:scale on hover
<p>I have an image with a div inside a block that scales bigger on mouse hover and then the block becomes the display block on hover. The code I have is likes this:</p>

<pre><code>&lt;div&gt;
  &lt;img&gt;
  &lt;div class="social-sharing"&gt;
    &lt;a href="#" class="fb"&gt;Fb&lt;/a&gt;
    &lt;a href="#" class="twitter"&gt;Twitter&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My CSS (LESS) is like the following: </p>

<pre><code>div {
  &amp;:hover {
    transform: scale(1.1);
    .social-sharing {
      display: block;
    }
  }
  .social-sharing {
    display: none;
    .fb {
      border-right: 3px solid #fff;
    }
  }
}
</code></pre>

<p>When I hover the img re-scales a little bit, what is even more important to me is the white of the border isn't just white it is gray.</p>

<p>You can see it <a href="http://codepen.io/Sukrams/pen/RGNkEW" rel="nofollow">in my codepen</a></p>

<p>Why is it like this and how can I solve it?</p>