click on a div box with href

Question

I have this code

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front" style="background: url(games/racegame/foto/fotozonder.PNG) 0 0 no-repeat;">
        </div>
        <div class="back" style="background:#00B9FF;>
            <a href="http://ispeedzone.com" rel="nofollow"></a>
        </div>
    </div>
</div>

so when the mouse hoves above it it flips 180 so i see the back. But what i wanna do is when the mouse hovers and you can see the back you can then click and in this case go to ispeedzone.com someone know how to do that?

Answer 1

Try this:

.flip-container {
	perspective: 1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
	transform: rotateY(0deg);
    background: orange;
}

.back {
	transform: rotateY(180deg);
    background: yellow;
}
   
.back a {
  display: block;
  width: 100%;
  height: 100%;
}

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
	transform: rotateY(180deg);
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			hover to see back
		</div>
		<div class="back">
            <a href="http://ispeedzone.com" target="_blank">http://ispeedzone.com</a>
		</div>
	</div>
</div>

JSFiddle demo: http://jsfiddle.net/67ad9e8h/