Hide and Seek

I am trying to make two links clickable, while an element above them is made invisible via translate, display:none and so on. As soon as you click the div becomes visible again thought and the links don't work.

HTML

<div class="front" tabindex="0">
    Click me please!
</div>
<a href="www.google.com">
    <div class="back green"></div>
</a>
<a href="www.yahoo.com">
    <div class="back blue"></div>
</a>

CSS

.front{	
    height:150px;
    width:150px;
	position:absolute;
    z-index: 100;
	background: rgba(243, 146, 0, 0.5);
    border: 5px solid #F39200; }
.back{
    height:100px;
    width:100px;
    position:absolute;
    z-index:0;
}
.green{
    background:green;
}
.blue{
    background:blue;
    margin:100px 0 0 0;
}
div.front:focus{
  opacity:0;
  margin:-100px -100px;
  -webkit-transition: margin:2s;
  -webkit-transition: opacity: 0.5s;
}
.back:hover{
    width:200px;
}