// image offset around window edge
$img-offset: 10%
#image-layer
  position: absolute
  display: block

  top: $img-offset * -1
  left: $img-offset * -1
  width: 100% + ($img-offset * 2)
  height: 100% + ($img-offset * 2)
  
  opacity: 0.3
  transform-origin: 50% 50%
  
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/celebration.jpg")
  background-position: center
  background-size: cover
  
  

// global style
html, body
  height: 100%
  width: 100%
body
  background-color: #121212
  overflow: hidden

// center image
#static-image
  display: block
  position: absolute
  height: 200px
  width: 200px
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
  border-radius: 50%
  box-shadow: 0px 0px 12px rgba(0,0,0,0.2)
  overflow: hidden

  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/111863/profile_pic.jpg)
  background-repeat: no-repeat
  background-size: cover

  transition: opacity 400ms ease-in-out
  cursor: pointer
  opacity: 0.8
    
  &:hover
    opacity: 1