.wrapper
	section.sec01
	section.sec02
	section.sec03
	
.alternative TweenMax Hover
	a(href='https://codepen.io/xichen/pen/BZdNxj', target='_blank') Alternative: Pure CSS
View Compiled
=square($w, $h)
	width: $w
	height: $h
body, html
	margin: 0
	padding: 0
	height: 100%
	background: black
.wrapper
	+square(100%, 100%)
	section
		+square(calc(100% / 3), 100%)
		float: left
		filter: grayscale(50%)
		transition: filter .3s
		position: relative
		&::before
			content: ''
			position: absolute
			width: 100%
			height: 100%
			background: linear-gradient(rgba(black, .6), transparent)
			opacity: 1
			transition: .3s
		&.active
			filter: grayscale(0%)
			&::before
				opacity: 0
		&.sec01
			background: url('https://unsplash.it/1200/800?image=1026')
		&.sec02
			background: url('https://unsplash.it/1200/800?image=1047')
		&.sec03
			background: url('https://unsplash.it/1200/800?image=1033')
		&.sec01, &.sec02, &.sec03
			background-repeat: no-repeat
			background-position: 50% 50%
			background-size: cover

@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
	
View Compiled
$('.wrapper section').hover (->
  $(this).siblings().removeClass('active').end().addClass 'active'
  TweenMax.to $(this).siblings('section'), .8,
    css:
      width: '30%'
      opacity: '.6'
    ease: Quart.easeOut
  TweenMax.to $(this), .8,
    css: width: '40%'
    ease: Quart.easeOut
  return
), ->
  $('.wrapper section').removeClass 'active'
  TweenMax.to $('.wrapper section'), .8,
    css:
      width: '33.33333%'
      opacity: '1'
    ease: Quart.easeOut
  return
View Compiled
Rerun