.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!