CSS Prevent Overflow when Using transform SCALE
<p>i have a problem when using <code>transform: scale();</code> </p>

<p>basically, i'm using this scale on Image that has <code>overflow:hidden</code> </p>

<p>check this fiddle out for live action : <a href="https://jsfiddle.net/ns3vm3x6/" rel="noreferrer">https://jsfiddle.net/ns3vm3x6/</a></p>

<p><strong>HTML</strong> </p>

<pre><code>&lt;div id="container1"&gt;
  &lt;img src="http://lorempixel.com/400/200"&gt;
&lt;/div&gt;
&lt;p&gt; i want this image to scale just like #example no. 2. how to achive this one? &lt;/p&gt;
&lt;br&gt;&lt;br&gt;
&lt;div id="container2"&gt;
  &lt;img src="http://lorempixel.com/400/200"&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>#container1 {width:100%; height:200px; border:2px solid red;
 overflow-x:scroll; overflow-y:hidden; white-space:no-wrap; }

#container2 {width:100%; height:200px; border:2px solid red; white- space:no-wrap;  }
img {width:200px; height:200px; transition:transform 1s linear; }
img:hover {transform:scale(2); }
</code></pre>

<p>How to prevent that overflow when scaling image?</p>

<p>what's wrong with my code?</p>

<p>thanks in advance...</p>