Wowee pics within tiny boxes that move

by Reusablecode

HTML

<div class="wrapper">
<h4>To use the below demo, hover over the photo portion of a box below. If your browser supports CSS3 transitions, you should see the image expand in height, padding and margin.</h4>  
<div class="note">Lorem<div class="photo"></div></div>
<div class="note">Ipsum<div class="photo"></div></div>
<div class="note">Lorem<div class="photo"></div></div>
<div class="note">Lorem<div class="photo"></div></div>
<div class="note">Ipsum<div class="photo"></div></div>
<div class="note">Lorem<div class="photo"></div></div>
<div class="note">Lorem<div class="photo"></div></div>
<div class="note">Ipsum<div class="photo"></div></div>
<div class="note">Lorem<div class="photo"></div></div>
<div class="note">Lorem<div class="photo"></div></div>
<div class="note">Lorem<div class="photo"></div></div>
<div class="note">Lorem<div class="photo"></div></div>
</div>

CSS

body {   background-image:url('http://addyosmani.com/blog/wp-content/uploads/2011/04/bg23.png'); margin:0 auto; text-align:center;}

.note { 
    padding:30px; 
    color:#000; 
    font-family: Arial, Helvetica, sans-serif;
    text-align:center; 
    width:100px;
    height:150px;
    margin:10px; 
    float:left;
    text-shadow:0px 1px 1px #fff;
    background: #83C8F7; 
    background: -moz-linear-gradient(top, #83C8F7 0%, #207ce5 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83C8F7), color-stop(100%,#207ce5)); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83C8F7', endColorstr='#207ce5',GradientType=0 ); 
    box-shadow:0px 7px 14px #666666;
    border-top:1px solid #fff;
}



.photo{
    border:1px solid #fff;
    width:95px;
    height:120px;   
    margin-top:10px;
    background:url('http://addyosmani.com/blog/wp-content/uploads/2011/04/painting21.gif');
    background-position:-100px -120px;

}

.photo:hover{
    padding:5px;
    height:150px;
    margin:-25px 0px 0px -5px;
    box-shadow:1px 4px 2px 0px #000;
    background-position: -450px -120px;
    /* apply transitions to all properties*/
    -moz-transition: all 0.5s ease-out; 
    -o-transition: all 0.5s ease-out;  
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;     
}

.wrapper{
 width:720px; 
 margin:0 auto;  
}

h4{
 border:1px solid #FCEFA1;
 padding:8px;
 margin:0 auto;
 background-color:#ffffcc;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 width:
}