responsive blurred image background

image.styl

body
  display flex
.image
  width 30vw
  height 80vh
  margin auto
  position relative
  overflow hidden
  &::before
  &::after
    content ''
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background-image url(https://images.unsplash.com/photo-1449426468159-d96dbf08f19f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80)
    background-position center center
    background-repeat no-repeat
  &::before
    background-size cover
    filter blur(15px)
  &::after
    background-size contain