title: Load image not as a rectangle
body: <p>Is there a way to load image not as a rectangle?
  I have some image of buildings looking like this and I want to make a hover effect only on the red area.
  This will be another picture with <code>opacity: 0</code> and <code>opacity: 1</code> on hover.</p>
  <p><a href="https://i.stack.imgur.com/8fhAK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8fhAK.jpg" alt="enter image description here" /></a></p>
  <p>EDIT:</p>
  <p>For anyone looking for a solution to a similar problem all the answers got me into looking deeper. <code>clip-path</code> can do the job but has poor browser support. <code>&lt;map&gt;</code> is not very usefull if I want to change the background color etc. of selected area. What worked for me best is using <code>SVG</code> with <code>polygons</code>. SVG area is the same size as my background image and polygons match areas I want.
  Scaling is also done right away and <code>CSS</code> can be used.</p>