view enlarged image ontop of content on mouseover with javascript
<p>I am trying to use javascript to show a larger version of my image on mouseover. I have the functionality working however the display property is not right and I need the image to be shown ontop of the page content i.e like a popout.</p>

<p>How an I add this to my code. The problem I have is that my page is divided into columns so the image is restricted by the width of the column so I need a way to override that i.e. use a popout.</p>

<p><a href="https://jsfiddle.net/moragw5/2rt836co/1/" rel="nofollow">DEMO - js fiddle</a></p>

<p>html:</p>

<pre><code>&lt;div class="column1"&gt;
&lt;div class="enlarge"&gt;
&lt;img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image"&gt;
&lt;div id="test1" class="test1" style="display:none;"&gt;
&lt;img width="800" src="example.jpg" alt="" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="column2"&gt;
A LOT OF TEXT IN HERE
&lt;/div&gt;
</code></pre>

<p>javascript:</p>

<pre><code>function bigImg() {
            $("#test1").show();
        }

        function normalImg() {
            $("#test1").hide();
        }
</code></pre>