<div id="polaroid"></div>
* {
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%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.