only part of a href link is active

Question

I'm building an HTML, CSS thumbnail grid, with rotating thumbs, on the back of the thumbs is a href link. For some reason only part of the link is clickable.

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
    <div class="front">
        front
    </div>
    <div class="back">
        back
         <p><a href="index.html">Find out more</a></p>
    </div>
</div>

Please see my jsfiddle http://jsfiddle.net/brm3z2dk/3/

Answer 1

Add this to your css file OR Append .back

.back {
 transform: rotateY(180deg) translateZ(1px);
 width: 200px;
 height: 150px;
 padding: 10px;
 background-color: rgb(29, 140, 194);
 font-size: 22px;
 color: rgb(255, 255, 255);
 font-weight: 300;
 line-height: 1.1;
 }

I added just translateZ(1px) to transform.

Working JS fiddle

http://jsfiddle.net/2a8y5x3t/

I hope this helps :)