Hexagons-with-Hover-Effect.markdown

Hexagons with Hover Effect

This is the demo for my blog post (http://blog.ansacopeland.com/chatter/2013/3/25/hover-friendly-hexagons) about how I build the image hexagons + hover effects on my new website.

A Pen by Ansa Copeland on CodePen.

License.

index.slim

.wrapper
  .hovertext Hello World!
  .overlay
  img src="http://ansa.io/sketch.png"
  .mask-wrapper
    .rec1.rec
    .rec2.rec
    .rec3.rec 

script.coffee

$("document").ready ->
  $(".mask-wrapper").hover(
    ->
      $(".overlay").fadeIn("fast")
      $(".hovertext").fadeIn("fast")
    ->
      $(".overlay").fadeOut("fast")
      $(".hovertext").fadeOut("fast")
  )

style.sass

@import "compass"
.wrapper
  position: relative
  width: 260px
  height: 300px
  display: inline-block
  margin: 30px

.hovertext
  display: none
  text-align: center
  z-index: 3
  position: absolute
  top: 60px
  margin-left: 2px
  margin-right: 2px
  margin-top: 75px
  width: 256px
  height: 150px
  color: white

.overlay
  display: none
  position: absolute
  z-index: 1
  background-image: url("http://ansa.io/cloudy.png")
  width: 260px
  height: 300px

img
  z-index: 0
  position: absolute
  top: 0
  left: 0

.mask-wrapper
  z-index: 3
  position: absolute

.rec
  position: absolute
  width: 260px
  height: 150px
  top: 75px
  opacity: 0

.rec1
  @include rotate(60deg)
  background-color: red

.rec2
  @include rotate(-60deg)
  background-color: green

.rec3
  background-color: blue