CodePen

HTML

            
              
<ul id="polaroid">
  <li class="polaroid" title="title1"><img src="http://www.visibilityinherit.com/projects/test.jpg"></li>
  
</ul>
            
          
!
via HTML Inspector

CSS

            
              @-webkit-keyframes spinscale {  
from {  
    transform: scale(1.5) rotate(10deg);  
}  
to {  
    transform: scale(1) rotate(370deg);

    }
}

body {background:#06c;
}

#polaroid {
  width:200px;
  list-style:none;
  margin:10px auto;
}
#polaroid li {
  float:left;
  margin:40px;
  padding:10px 10px 45px 10px;
  width:160px;
  height:160px;
  background:#fff;
  font-weight:bold;
  box-shadow:0px 4px 6px #000, inset 0 0 6px #333;
  border-radius:5px;
  cursor:default;
  text-align:center;
  transform:rotate(10deg) scale(1);
  animation-name: spinscale;  
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;  
  animation-duration: 1.5s;

}
#polaroid li:before {
  position:absolute;
  content:'';
  width:160px;
  height:160px;
  box-shadow:inset 0 0 5px 5px #000;
}
#polaroid li:after {
  content:attr(title);
  padding-top:8px;
  display:block;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................