<pre lang="xml"><!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Google Plus Photo Album Animation Effect( Photo Stack Animation)with Jquery and CSS3</title> <link rel="stylesheet" href="css/reset.css" media="screen"> <link rel="stylesheet" href="css/style.css" media="screen"> <style type="text/css"> ul#pics li {/*css style for the single photo only **/ background: none repeat scroll 0 0 #FFFFFF; box-shadow: 1px 1px 1px #999999; display: inline-block; width: 153px; height:157px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } ul#pics li img {/*css style for the single photo only **/ width: 150px; height:150px; display: block; } ul#pics li:hover {/*css style for the single photo only **/ -moz-transform: scale(1.1) rotate(0deg); -webkit-transform: scale(1.1) rotate(0deg); -o-transform: scale(1.1) rotate(0deg); -ms-transform: scale(1.1) rotate(0deg); transform: scale(1.1) rotate(0deg); } .single_photo {/*css style for the single photo only **/ margin-top : 80px; margin-left:100px; margin-top:65px; } h3 { margin:25px; } a, a:visited, a:hover { color: #54A6DE; outline: medium none; text-decoration: none; } #footer { /* demo footer text */ font-size:9px; margin-top:300px; margin-left: 250px; color: #888888; } #text { margin-top:10px; margin-left:10px; color: #DD4B39; font-type: arial, sans-serif; font-size:17px; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)