Overlapping images with hover effects

I am trying to implement an effect where 3 up arrow graphics are pressed against each other and as you hover over one, the arrow gets bigger, and on click you get taken to a new page.

The problem I am having is when the arrows are overlapping, the transparent part of the image responds to the hover.

What would the best way to build this be? I was considering svg, but the graphics are so complex.

Each one of those arrows is a separate image and on hover they scale up. But the overlapping parts cause unexpected behavior when moving between the graphics.

This is a link to what I have so far. http://show.issa.com.php56-33.ord1-1.websitetestlink.com/

Solution

I figured it out. Incase anyone wonders, I was able to use SVG with an inline image. On top of the image I added a polygon with points that matched a rough outline of the arrow. That polygon had an svg link added to it, and everything but the polygon had pointer-event: none;

For anyone that wants the code:

function addPrevClass(e) {
  var target = e.target;
  if (target.getAttribute('points')) { // check if it is svg
    var li = target.parentNode.parentNode.parentNode;
    var prevLi = li.previousElementSibling;
    if (prevLi) {
      prevLi.className = 'prev';
    }
    if (li) {
      li.className = 'current-hover';
    }

    target.addEventListener('mouseout', function() {
      if (prevLi) {
        prevLi.removeAttribute('class');
      }
      if (li) {
        li.removeAttribute('class');
      }
    }, false);
  }
}
if (window.addEventListener) {
  document.getElementById("unleashed").addEventListener('mouseover', addPrevClass, false);
}

#unleashed-container {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 80px;
  margin: auto;
  height: 100%;
  z-index: -99;
}
#unleashed-container #unleashed {
  height: 100%;
}
#unleashed-container #unleashed ul {
  height: 100%;
  overflow: hidden;
}
#unleashed-container #unleashed ul li {
  list-style-type: none;
  display: inline-block;
  text-align: center;
  margin: 0;
  height: 100%;
  position: relative;
  width: 14%;
  pointer-events: none;
}
#unleashed-container #unleashed ul li#pink-arrow {
  margin-left: -7.28%;
  margin-right: -7.3346%;
  width: 18.2%;
  z-index: 1;
}
#unleashed-container #unleashed ul li#blue-arrow {
  z-index: 2;
}
#unleashed-container #unleashed ul li#green-arrow {
  z-index: 0;
}
#unleashed-container #unleashed ul li a {
  display: block;
  height: 100%;
  position: relative;
}
#unleashed-container #unleashed ul li a img {
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
}
#unleashed-container #unleashed ul li svg {
  display: block;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
#unleashed-container #unleashed ul li svg image {
  pointer-events: none;
}
#unleashed-container #unleashed ul li svg polygon {
  pointer-events: fill;
}
#unleashed-container #unleashed ul li.current-hover .tooltip {
  display: none;
}
#unleashed-container #unleashed ul li.current-hover img,
#unleashed-container #unleashed ul li.current-hover svg {
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}
#unleashed-container #unleashed ul li:hover + li img,
#unleashed-container #unleashed ul li.prev img,
#unleashed-container #unleashed ul li:hover + li svg,
#unleashed-container #unleashed ul li.prev svg {
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -webkit-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
}

<div id="unleashed-container">
  <div id="unleashed">
    <ul>
      <li id="blue-arrow">
        <svg class="arrow" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 875.67 1418">
          <image width="850" height="1412" xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/wp-content/themes/issa2016/images/blue-arrow.png"></image>
          <a xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/attend/">
            <polygon points="0.5 550.19 0.5 575.71 170.5 575.71 173.96 1417.5 705.17 1417.5 705.17 584.78 875.17 584.78 875.17 559.27 453.17 0.5 423.17 0.5 0.5 550.19" opacity="0" style="fill: #333"></polygon>
          </a>
        </svg>
      </li>
      <li id="pink-arrow">
        <svg class="arrow" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 850 1648">
          <image width="850" height="1648" xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/wp-content/themes/issa2016/images/pink-arrow.png"></image>
          <a xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/attend/">
            <polygon points="425 0 0 554.78 172.79 554.78 172.79 1648 673.84 1648 673.84 560.78 850 560.78 425 0" opacity="0" style="fill: #333"></polygon>
          </a>
        </svg>
      </li>
      <li id="green-arrow">
        <svg class="arrow" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 875.67 1418">
          <image width="850" height="1412" xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/wp-content/themes/issa2016/images/green-arrow.png"></image>
          <a xlink:href="http://show.issa.com.php56-33.ord1-1.websitetestlink.com/attend/">
            <polygon points="0.5 550.19 0.5 575.71 170.5 575.71 173.96 1417.5 705.17 1417.5 705.17 584.78 875.17 584.78 875.17 559.27 453.17 0.5 423.17 0.5 0.5 550.19" opacity="0" style="fill: #333"></polygon>
          </a>
        </svg>
      </li>
    </ul>
  </div>
</div>