Normally, Polaroid Gallery is a CSS3 & jQuery Image Gallery plugin for Media Library. It is used to overlay images as Polaroid pictures on the current page or post.
It’s a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated Polaroid pictures gallery with some of these cool features. This is something I wished to do for a while and I finally made it.
The HTML
The HTML structure hasn’t changed at all, simple and minimal. Here’s an excerpt:
<div class="photo-album">
<h2>Dhiraj, Geetu & Atharv at Taj ↦ Agra
<a class="large polaroid img1" href="#">
<img alt="" src="https://lh3.googleusercontent.com/-73u0oSgSX0w/UQ6PZ0Z1wOI/AAAAAAAADPE/57bc9C0BEG0/s512/Agra-trip%252520112.JPG" />
Camel wants to kiss Atharv. </a>
<a class="polaroid img2" href="#">
<img alt="" src="https://lh4.googleusercontent.com/-cPFum21LNBA/UQ6PXyb2ISI/AAAAAAAADPM/kJLhIyvx_2k/s512/Agra-trip%252520147.JPG" />
My dearest one.. Atharv with Geetu. — at Taj Mahal</a>
<a class="small polaroid img3" href="#">
<img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" />
Ferntastic</a>
<a class="medium polaroid img4" href="#">
<img alt="" src="https://lh4.googleusercontent.com/-gB3RNt_3aos/UQ6Pmx5egoI/AAAAAAAADKM/lensH9ojFd0/s512/Agra-trip%252520154.JPG" />
My dearest one.. Atharv with Geetu. — at Taj Mahal</a>
<a class="polaroid img5" href="#">
<img alt="" src="https://lh5.googleusercontent.com/-YbVIBYilZ-M/UQ6P0w2PC8I/AAAAAAAADNc/kKzFy9k51D8/s512/Agra-trip%252520170.JPG" />
Atharv & Geetu with Dhiraj.. Taj in background</a>
<a class="polaroid img6" href="#">
<img alt="" src="https://lh6.googleusercontent.com/-IedPhDIDTcg/UQ6P5NG_hSI/AAAAAAAADKw/frG26WPd_OY/s512/Agra-trip%252520175.JPG" />
Atharv in a cute pose.. Taj mahal in background</a>
<a class="polaroid img7" href="#">
<img alt="" src="https://lh6.googleusercontent.com/-fhOKmDe-6S4/UQ6QBnHRDhI/AAAAAAAADPw/StGk4el6PVI/s512/Agra-trip%252520192.JPG" />
Atharv with his papa Dhiraj</a>
<a class="small polaroid img8" href="#">
<img alt="" src="https://lh4.googleusercontent.com/-lUXHF4hGxak/UQ6QF_7iZnI/AAAAAAAADOs/-agtNNnnYbU/s512/Agra-trip%252520193.JPG" />
awesome</a>
<a class="medium polaroid img9" href="#">
<img alt="" src="https://lh3.googleusercontent.com/-a-kezOzwNR8/UQ6QNJpEa4I/AAAAAAAADNk/FAN4Z3LDy2Y/s512/Agra-trip%252520206.JPG" />
Geetu with Dhiraj</a>
<a class="polaroid img10" href="#">
<img alt="" src="https://lh6.googleusercontent.com/-J3Gcspy0HKg/UQ6QXk3ZV9I/AAAAAAAADQE/0PyQD_VvC8o/s512/Agra-trip%252520221.JPG" />
Nice one..</a>
<a class="small polaroid img11" href="#">
<img alt="" src="https://lh5.googleusercontent.com/-OLpIvUAwZ6E/UQ6QY9gnPwI/AAAAAAAADNo/00eTz4E3_GI/s512/Agra-trip%252520223.JPG" />
Sulphurous</a>
<a class="small polaroid img12" href="#">
<img alt="" src="https://lh6.googleusercontent.com/-V-NJ8w3N5hs/UQ6QYqtZVOI/AAAAAAAADOw/FcjS2sgQXxA/s512/Agra-trip%252520229.JPG" />
Atharv with his papa..</a> <a class="small polaroid img13" href="#">
<img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" />
Atharv with his papa Dhiraj</a>
<a class="small polaroid img14" href="#">
<img alt="" src="https://lh6.googleusercontent.com/-Bz8NR-oKxGw/UQ6PguAxrsI/AAAAAAAADNY/B7i8X02vnbg/s512/Agra-trip%252520153.JPG" />
Nice one..</a>
<a class="polaroid img15" href="#">
<img alt="" src="https://lh4.googleusercontent.com/-W1T4Z6_xwlQ/UQ6QAdQwuzI/AAAAAAAADNg/vSiGaoo7_TU/s512/Agra-trip%252520188.JPG" />
Atharv with his papa Dhiraj</a>
</div>
CSS
a.polaroid {
display: block;
text-decoration: none;
color: #333;
padding: 10px 10px 20px 10px;
width: 150px;
border: 1px solid #d7d7d7;
background-color: white; background:rgba(255,255,255,.9);
z-index: 2;
font-size: 0.7em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);;
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3),inset 0 0 0.7em rgba(0,0, 0, 0.4);-webkit-filter: blur(1px); border-radius:5px;
-webkit-transition: all 0.5s ease-in; text-align:center
}
a.polaroid:hover, a.polaroid:focus, a.polaroid:active {
z-index: 999;
border-color: #999;
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4),inset 0 0 0.7em rgba(0,0, 0, 0.4);
-webkit-transform: rotate(0deg) scale(1.05);
-moz-transform: rotate(0deg) scale(1.05);
transform: rotate(0deg) scale(1.05);-webkit-filter: blur(0px);
}
.polaroid img {
margin: 0 0 15px;
width: 150px;
height: 120px;
}
a img {
border: none;
display: block;
}
.photo-album {
position: relative; width: 80%; margin: 0 auto; max-width: 70em; height: 450px; margin-top:2.5em; min-width: 800px; max-width: 900px;
}
.photo-album .polaroid {
position: absolute;
}
.photo-album h2 {
position: absolute; z-index: 5; top: 150px; text-align: center; width: 100%; line-height: 2;
}
.photo-album h2 span {
background-color: white; background:rgba(255,255,255,.8);
font-family: 'Satisfy', cursive;
padding: 0.4em 0.8em 0.3em 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
border-radius: 5px; border:1px solid #CCC
}
.photo-album .small {
width: 75px; padding: 6px 6px 12px 6px; font-size: 0.6em;
}
.photo-album .small img {
width: 75px; height: 60px;
}
.photo-album .medium {
width: 200px; padding: 13px 13px 26px 13px; font-size: 0.8em;
}
.photo-album .medium img {
width: 200px; height: 165px;
}
.photo-album .large {
width: 300px; padding: 20px 20px 30px 20px; font-size: 1em;
}
.photo-album .large img {
width: 300px; height: 250px
}
.photo-album .img1 {
bottom: 10px; right: 365px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.photo-album .img2 {
top: 50px; right: 20px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.photo-album .img3 {
left: 400px; top: 0;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.photo-album .img4 {
top: 10px; left: 495px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.photo-album .img5 {
bottom: 0; right: 0;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.photo-album .img6 {
bottom: 10px; right: 156px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.photo-album .img7 {
bottom:0; left:400px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photo-album .img8 {
bottom: -20px; left: 700px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img9 {
bottom: 0; left: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img10 {
top: 0; left: 20px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.photo-album .img11 {
top: 0; right: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img12 {
top: 0; left: 680px;
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
transform: rotate(18deg);
}
.photo-album .img13 {
bottom: -20px; right: 630px;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.photo-album .img14 {
top: 90px; left: 430px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
.photo-album .img15 {
left:176px; top:20px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
a:hover, a:focus {
z-index: 5;
}
Your turn
I hope you enjoyed this article and the techniques I used. Please share your comments and questions below!
Posted by: Dhiraj kumar
HTML5, CSS3, JQuery Tips & Tricks 
Nice work and pics.
very creative and nice use of css for animation