CSS3 Cool and Interactive Photo Frame

by Ali Khaled

HTML

<div id="photo">
    <img src="http://www.w3.org/html/logo/img/class-header-css3.jpg"/>
    <div class="info">CSS3 Styling &hearts;</div>
</div>
<div id="photo">
    <img src="http://www.w3.org/html/logo/img/class-header-3d.jpg"/>
    <div class="info">3D, Graphics, Effects</div>
</div>
<div id="photo">
    <img src="http://www.w3.org/html/logo/img/class-header-multimedia.jpg"/>
    <div class="info">Multimedia</div>
</div>

CSS

#photo{
    width:100px;
    height:130px;
    padding:10px 10px 0px 10px;
    background:#ffffff;
    border:1px solid #555555;
    
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
    
    -webkit-box-shadow:7px 7px 25px #555555;
    -moz-box-shadow:7px 7px 25px #555555;
    -o-box-shadow:7px 7px 25px #555555;
    box-shadow:7px 7px 25px #555555;
    
    float:left;
    margin-right:10px;
}
#photo img{
    width:100px;
    height:100px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}
.info{
    width:100%;
    font-weight:bold;
    background:#ffffff;
    text-align:center;
    font-size:10px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
}
#photo:hover{
    -webkit-transform:rotate(360deg);   
    -moz-transform:rotate(360deg);   
    -o-transform:rotate(360deg);   
    transform:rotate(360deg);   
    width:200px;
    height:230px;
}
#photo:hover img{
    width:200px;
    height:200px;    
}    
#photo:hover .info{
    font-size:12px;  
}