.wrapper
  section.sec01
  section.sec02
  section.sec03
  
.alternative Pure CSS Hover
  a(href='https://codepen.io/xichen/pen/qjXdaK', target='_blank') Alternative: TweenMax

=square($w, $h)
  width: $w
  height: $h
body, html
  margin: 0
  padding: 0
  height: 100%
  background: black
.wrapper
  +square(100%, 100%)
  pointer-events: none
  section
    +square(calc(100% / 3), 100%)
    float: left
    filter: grayscale(50%)
    transition-duration: .5s
    position: relative
    pointer-events: all
    &::before
      content: ''
      position: absolute
      width: 100%
      height: 100%
      background: linear-gradient(rgba(black, .6), transparent)
      opacity: 1
      transition: .3s
    &.sec01
      background: url('https://unsplash.it/1200/800?image=1015')
    &.sec02
      background: url('https://unsplash.it/1200/800?image=944')
    &.sec03
      background: url('https://unsplash.it/1200/800?image=877')
    &.sec01, &.sec02, &.sec03
      background-repeat: no-repeat
      background-position: 50% 50%
      background-size: cover
  &:hover
    section
      &:hover
        width: 40%
        filter: grayscale(0%)
        &::before
          opacity: 0
      &:not(:hover)
        width: 30%
    
@import 'https://fonts.googleapis.com/css?family=Lato:300'
.alternative
  display: inline-block
  top: 50%
  left: 50%
  position: absolute
  transform: translate(-50%, -50%)
  font-family: 'Lato', Arial, sans-serif
  letter-spacing: .08em
  line-height: 1
  font-size: 2.4rem
  text-align: center
  color: rgba(white, .6)
  background: rgba(black, .4)
  padding: .6em 1em
  a
    margin-top: 15px
    font-size: 1.2rem
    display: block
    padding: .6em 0
    background: rgba(white, .2)
    color: rgba(white, .6)
    text-decoration: none
    transition-duration: 0.3s
    &:hover
      background: rgba(white, .6)
      color: #333

# ヽ(○´w｀○)ﾉ Empty here!