title: How to make SVG larger on hover?
body: <p>How do I make each SVG section larger on hover. I am trying to replicate the way this interactive map does it: <a href="http://goo.gl/orvyYI" rel="noreferrer">http://goo.gl/orvyYI</a></p>
  
  <p>I have created a basic interactive map here to test with:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px"
       height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve"&gt;
  &lt;style type="text/css"&gt;
      .st0{fill:#C1C1C0;}
      .st1{fill:#0FB5CB;}
      .st2{fill:#46B649;}
  &lt;/style&gt;
  &lt;g id="Layer_1"&gt;
      &lt;polygon class="st0" points="76.6,96.1 745.6,96.1 745.6,543.7 188.3,543.7   "/&gt;
  &lt;/g&gt;
  &lt;g id="landmarks-test"&gt;
      &lt;rect id="1" x="495.2" y="130.6" class="section" width="233.1" height="83.4"/&gt;
      &lt;rect id="2" x="495.2" y="235.4" class="section" width="233.1" height="95.9"/&gt;
      &lt;rect id="3" x="495.2" y="345.8" class="section" width="233.1" height="84.1"/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I have tried to implement the way they have done it using <code>transform: matrix()</code> and also have tried <code>transform: scale()</code> with no success.</p>
  
  <p><a href="http://codepen.io/ifusion/pen/JYZvwE" rel="noreferrer">CODEPEN DEMO</a></p>