title: How to make flip side of image clickable
body: <p>dear friends I thank you for taking the time, I have four elements which spin on the y axis when hovered over.  They are contained in four divs which themselves are contained in a div wrapper.  I would like to make the back image clickable when i hover over it and I am unsure how to do this.  It seems to me that its not good form to wrap the whole div in an anchor tag which may not even work.  I had originally included a clickable image inside the div but this appeared to me to be also not good form although I suspect at present it might be the only way, I dunno.  You can see my problem here, </p>
  
  <p><a href="http://arthouse.comlu.com" rel="nofollow">site with CSS flippers</a></p>
  
  <p>I include the portions of the html and the CSS that are pertinent and many thanks for taking the time.</p>
  
  <pre><code>&lt;div id="frontflipwrapper"&gt; 
  &lt;div class="frontflip3D"&gt; 
  &lt;div id="openings_back" class="back_page_flip"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div id="openings" class="front_page_flip"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  &lt;div class="frontflip3D"&gt; 
  &lt;div id="middle_game_back" class="back_page_flip"&gt;&lt;/div&gt; 
  &lt;div id="middle_game"class="front_page_flip"&gt;&lt;/div&gt; 
  &lt;/div&gt; 
  &lt;div class="frontflip3D"&gt; 
      &lt;div id="end_game_back" class="back_page_flip"&gt;&lt;/div&gt; 
      &lt;div id="end_game"class="front_page_flip"&gt;&lt;/div&gt; 
  &lt;/div&gt;
  &lt;div class="frontflip3D"&gt; 
  &lt;div id="strategy_back" class="back_page_flip"&gt;&lt;/div&gt; 
  &lt;div id="strategy"class="front_page_flip"&gt;&lt;/div&gt; 
  &lt;/div&gt;
  &lt;/div&gt; 
  
  /* front page flipper*/
  
  #frontflipwrapper{
  margin:10px auto;
  width:100%;
  height:140px;
  }
  
  .frontflip3D{ 
      width:100px; 
      height:100px; 
  margin:4.2%;
  float:left; 
  } 
  .frontflip3D &gt; .front_page_flip{ 
  position:absolute; 
  transform: perspective( 600px ) rotateY( 0deg ); 
  background:#ccc;
  border-radius:4px;  
  width:10%; 
  height:100px; 
  backface-visibility: hidden; 
  transition: transform .5s linear 0s; 
  } 
  .frontflip3D &gt; .back_page_flip{ 
  position:absolute; 
  transform: perspective( 600px ) rotateY( 180deg ); 
  background:#80bfff;
  border-radius:4px;  
  width:10%; 
  height:100px; 
  backface-visibility: hidden; 
  transition: transform .5s linear 0s; 
  } 
  .frontflip3D:hover &gt; .front_page_flip{ 
  transform: perspective( 600px ) rotateY( -180deg ); 
  } 
  
  .frontflip3D:hover &gt; .back_page_flip{ 
  transform: perspective( 600px ) rotateY( 0deg ); 
  } 
  
  #openings{
  background-image:url(pawn.png)
  }
  
  #middle_game{
  background-image:url(knight.png)
  }
  #end_game{
  background-image:url(king.png)
  }
  #strategy{
  background-image:url(rook.png)
  }
  
  #openings_back{
  background-image:url(img/opening_back.png)
  
  }
  
  #middle_game_back{
  background-image:url(img/middle_game_back.png)
  }
  
  #end_game_back{
  background-image:url(img/endgame_back.png)
  }
  
  #strategy_back{
  background-image:url(img/strategy_back.png)
  }
  
  /* end of front page flipper*/
  </code></pre>