* { 
  box-sizing: border-box;
}
div#polaroid {
  margin: 0 auto;
  border: 25px solid #e3e4d3;
  border-bottom-width: 50px;
  transition: 3s box-shadow ease-in;
  box-shadow: 0 0 200px 200px rgba(29, 25, 4, 1) inset, 0 0 3px 6px rgba(0, 0, 0, 0.07);
  width: 50%;
  max-width: 500px;
  padding-top: 30%;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/christine-adams.jpg);
  background-size: contain;
  filter: sepia(50%);
}

div#polaroid:hover {
  box-shadow: 0 0 100px 0 rgba(29, 25, 4, 0.8) inset, 0 0 3px 6px rgba(0, 0, 0, 0.07);
  filter: sepia(20%);
}
@media all and (max-width: 700px) {
  div#polaroid { 
    width: 80%; 
    padding-top: 70%;
  }
}