.wrapper
section.sec01
section.sec02
section.sec03
.alternative Pure CSS Hover
a(href='https://codepen.io/xichen/pen/qjXdaK', target='_blank') Alternative: TweenMax
View Compiled
=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
View Compiled
# ヽ(○´w`○)ノ Empty here!
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.