title: javascript display image on screen with animation
body: <p>I'm a beginner in javascript and I stumbled upon this problem. 
  This is a part of markup from site i'm working on:</p>
  
  <pre><code>        &lt;div class="row"&gt;
              &lt;div class="col-lg-12"&gt;
                  &lt;div id="target"&gt;
                      &lt;div id="bgDiv"&gt;
                          &lt;img src ="someurl"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
             &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>It's a part of a simple bootstrap layout.  What i want to do is to animate the #target div so that the image fills the whole browser screen on mouseover , preferably using pure javascript. If I do it with this function: </p>
  
  <pre><code> function(){
      var target = document.getElementById('target');
      function FullScreen {
            target.style.cssText ='position:absolute;top:0;bottom:0;left:0;right:0;z-index:999'
            document.body.appendChild(target);};
      target.addEventListener('mouseover', FullScreen)};
  </code></pre>
  
  <p>It does the job of displaying the image covering whole browser window, but I'm cluless how to make the "fill" animation. I tried experimenting with transitions, but i think since i change the 'position' property and append the element to body it does not work. 
  I would be grateful for any help or suggestions. </p>