title: Hover over one DIV to zoom another DIV
body: <p>I am not sure if this is a simple task to accomplish but I've had no success so far.</p>
  
  <p>Let me explain the problem a little so that you understand what's going on.</p>
  
  <p>The <code>body</code> element contains one <code>div</code> which contains a <code>background</code> that covers the entire window. I want this very big <code>div</code> to contain a smaller one somewhere in the middle. A transparent one. So whenever I would hover over the invisible <code>div</code> the parent would zoom from there.</p>
  
  <p>This is me trying to accomplish a CSS zoom effect in a certain area of a picture. Whenever I leave the entire invisible div I want the huge background to return to its original zoom.</p>
  
  <p>Here's some code.</p>
  
  <pre><code>&lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Page&lt;/title&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
          &lt;script&gt;
  
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="indexPage" class="indexPage"&gt;
              &lt;div id="indexInvisible" class="indexInvisible"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  * {
      margin: 0;
      padding: 0;
  }
  
  body {
      line-height: 1.5;
      font-family: Arial, Tahoma;
      font-size: 12px;
  }
  
  .indexPage {
      background: url("map.jpg");
      width: 100%;
      height: 100%;
      background-size: cover;
      position: fixed;
      transition: transform .2s;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.indexPage &gt; .indexInvisible {
      width: 80%;
      height: 80%;
      background: black;
      margin: 5% auto 0 auto;
  
  }
  </code></pre>
  
  <p>Thanks a lot in advance!</p>