title: Triangled image maps and hover effects
body: <p>I'm trying to create a pretty simple hover effect with two triangles that I have. One of the triangle would start off underneath it, then on hover, show above the other triangle.</p>
  
  <p>The issue isn't really the effect, it's that the area boxes get in the way. Meaning the left triangle, which temporarily has a z-index above the other triangle, overlaps unnecessarily just because it's perimeter is a square and has a lot of wasted space.</p>
  
  <p>So hovering over triangle 2 only works in so many areas. I've tried to do an image map and utilizing the coordinate maps to do what I need, but I couldn't figure out how to keep it in triangle format while using it to do what I need to do. It just goes to a square.</p>
  
  <p>Is there a way to do this? It's basically just hovering over a specific shape, but CSS/HTML seems to be limited to squares. Any jQuery solutions or..?</p>
  
  <p>Thank you.</p>