/* CSS Document */
.photos img{   
position: relative;
}
.photos img:nth-of-type(1){
left:200px; top:30px; }
.photos img:nth-of-type(2){
left:100px; top:80px; }
.photos img:nth-of-type(3){
left:300px; top:200px; }
.photos img:nth-of-type(4){
left:400px; top:250px; }
.photos img:nth-of-type(5){
left:50px; top:20px; }
.photos img:nth-of-type(6){
left:60px; top:250px; }
.photos img:nth-of-type(7){
left:70px; top:200px; }

.photos img:nth-of-type(1) {
    left: 200px;
    top: 30px;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
}
 
.photos img:nth-of-type(2) {
    left: 100px;
    top: 80px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
 
.photos img:nth-of-type(3) {
    left: 80px;
    top: 50px;
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
}
 
.photos img:nth-of-type(4) {
    left: 10px;
    top: 30px;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
 
.photos img:nth-of-type(5) {
    left: -300px;
    top: 200px;
	bottom:20px;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
}
.photos img:nth-of-type(6) {
    left: 90px;
    top: 20px;
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    transform: rotate(-8deg);
}
.photos img:nth-of-type(7) {
    left: 70;
    top: 50px;
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
}

/* Hover Effects */
.photos img:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    z-index: 10;
}

/* Image rotation */
.photos img:hover {
    -webkit-transform: rotate(380deg) scale(1.5);
    -moz-transform: rotate(380deg) scale(1.5);
    -o-transform: rotate(380deg) scale(1.5);
    transform: rotate(380deg) scale(1.5);
    z-index: 10;
}

/* Refining the Effects by Managing Transitions */

.photos img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

/* Border */
.photos img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    padding: 10px 10px 10px 10px;
    background: #70BED4;
    border: solid 1px black;
}