title: Hexagon hover to Square with CSS
body: <p>I recently saw [this codepen][1] in which an octagon (wrongly called hexagon) is transformed into a square when hovered on.</p>
  
  <p>I want to do that, but with a 300px sized hexagon turning into a square.</p>
  
  <p>How can I achieve this? </p>
  
  <p>Thanks a lot!</p>
  
  <pre><code>  [1]: http://codepen.io/EdwinToh/pen/ktaxH?editors=110
  </code></pre>