A CodePen by dmac37. CSS Hexagon - CSS Hexagon Styling

index.haml

.center
  .hexagon
    .hexagon-in1
      .hexagon-in2

style.sass

@import "compass"
BODY 
  background: #222 

.center
  width: 200px
  margin: auto
  margin-top: -50px

.hexagon 
  width: 200px
  height: 400px
  overflow: hidden
  visibility: hidden
  transform: rotate(120deg)
  cursor: pointer

.hexagon-in1 
  overflow: hidden
  width: 100%
  height: 100%
  transform: rotate(-60deg)

.hexagon-in2
  width: 100%
  height: 100%
  visibility: visible
  transform: rotate(-60deg)  
  background: url('http://lorempixel.com/g/250/350/people')
    repeat: no-repeat
    position: 50%
  
.hexagon-in2:hover
  background: url('http://lorempixel.com/250/350/people')