How can I enlarge an image when hovering over part of a vector?
<p>I have 1 the in the top left of page mostly offscreen, which functions as a home button. I would like to slightly increase it's size when hovered over ,however nothing I try seems to work.</p>

<p>Seeing as the image is a vector which (thank god) is a perfect circle. So with the area tag I could easily make it a home button. Now I would like to enlarge the image when hovering over that area tag, I've tried working with the '+' selector.</p>

<p>How would I do something like this?</p>

<p>This is a code snippet for some context:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.emblem {
  width: 200px;
  height: 200px;
  position: absolute;
  margin: -100px 0px 0px -80px;
  z-index: 2;
  opacity: 0.9;
}
.emblem:hover {
  width: 220px;
  height: 220px;
}
.emblem2 {
  visibility: hidden;
  width: 220px;
  height: 220px;
}
area:hover + .emblem2 {
  visibility: visible;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;map name="homemap"&gt;
  &lt;area shape="circle" coords="100,100,100" alt="Home button" href="index.html" /&gt;
&lt;/map&gt;
&lt;img class="emblem" src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150" alt="UFF emblem" usemap="#homemap" /&gt;
&lt;img class="emblem2" src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150" alt="UFF emblem" usemap="#homemap" /&gt;</code></pre>
</div>
</div>
</p>

<p>Now this works fine... But only when I hover over the transparent part of the image, and what I want to achieve is the exact opposite.</p>