Border on pseudo tags covering :hover

Question

Any thoughts on how to fix the hover state so that it hovers over the .diamond? Bonus points if you can figure out how to hover over the whole diamond. I don't think it's possible without javascript.

http://jsfiddle.net/jaruesink/M332v/1/

<style>
*{margin:0px;padding:0px;}
section{width:930px; margin:0px auto;}
#diamondwrapper{position:relative;}
     .diamondrow{display:flex; flex-direction:row; justify-content:center;}
        .diamondrow:nth-child(2){position:relative; top:-113px;}
        .diamondrow:nth-child(3){position:relative; top:-226px;}
.diamond{position:relative; color:white; text-align:center; height:130px; width:130px; margin:50px; z-index:1;}
    .diamond:hover:before{border-bottom-color:#c2c2c2;}
    .diamond:hover:after{border-top-color:#c2c2c2;}
    .diamond:before, .diamond:after{content:''; position:absolute; width:0px; height:0px; margin:-50px; border:115px solid transparent; z-index:-1;}
        .diamond:before{left:0px; top:0px; border-top-width:0px; border-bottom-color:#e2e2e2;}
        .diamond:after{left:0px; top:115px; border-bottom-width:0px; border-top-color:#e2e2e2;}
    .diamondcontent{height:100%; width:100%; line-height:40px; width:100%; display:flex; flex-direction:column; justify-content:center;}
</style>

<section>
        <div id="diamondwrapper">
            <div class="diamondrow">
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            </div>
            <div class="diamondrow">
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            </div>
            <div class="diamondrow">
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            <div class="diamond"><div class="diamondcontent">testing</div></div>
            </div>
        </div>
        </div>
</section>

Answer 1

If anyone is curious, I was able to figure how to do this by rotating the block instead of using pseudo elements for the shape.

*{margin:0px;padding:0px;}
section{width:930px; margin:0px auto;}
#diamondwrapper{position:relative; -webkit-transform-origin: 50% 50%;}
.diamondrow{display:flex; flex-direction:row; justify-content:center;}
.diamond{position:relative; color:white; text-align:center; height:165px; width:165px; margin:35px 35px -80px 38px; background:#e2e2e2; -webkit-transform: rotate(45deg); display:flex; flex-direction:row; justify-content:center; align-items:center; flex-shrink:0; transition:all .4s ease;}
.diamond:hover{background:#b7b7b7;}
.diamondcontent{height:120px; width:120px; line-height:40px; display:flex; flex-direction:column; justify-content:center; -webkit-transform: rotate(-45deg);}