缩放div并使内容不缩放

Question

我一直试图扩大div，但现在很长时间没有内容。我已经查看了一些示例并看到了它应该工作的方式，但似乎可能无法使其工作:(问题是div内的图像在规模上变得模糊。（在悬停时。）

这是我的codepen链接 http://codepen.io/SusanneLundblad/pen/5cf90a3d7b3e2f592ebcb0ebb9d07bf9

.child
  position: absolute
  height: 450px
  width: 20%
  background-color: #1f2733
  border-radius: 0 
  background-position: 50% 50%
  background-size: cover
  -webkit-transform: translate3d(0,0,0)
  top: 0
  overflow: hidden
  z-index: 0
  transition: all 0.05s ease-in-out
  transform: translate3d(0,0,0)

  &:hover
    transform: scale(1.03)
    z-index: 2
    border-radius: 4px
    cursor: pointer
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5)
    .child__content  
      transform: translate(-50%,-50%) scale(.947)

感谢您的帮助