CSS3 has really empowered the web developer to add beauty, interactivity and animation to his web pages. The dependency on JavaScript for simple effects has reduced to a great level with the arrival of CSS3.
Just to showcase the power of CSS3, lets learn how to make a Polaroid style image gallery using CSS3 and HTML5.
HTML
First, make a new HTML file and copy the following code into the file :-
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3/HTML5 Polaroid Gallery</title> <link type="text/css" href="gallerystyle.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'> </head> <body> <h1>CSS3 - HTML5 Polaroid Gallery</h1> <ul class="pics"> <li><a href="" title="Sports"><img src="http://lorempixel.com/300/300/sports" /></a></li> <li><a href="" title="Random"><img src="http://lorempixel.com/200/200" /></a></li> <li><a href="" title="Animal"><img src="http://lorempixel.com/320/320/animals" /></a></li> <li><a href="" title="Food"><img src="http://lorempixel.com/340/340/food" /></a></li> <li><a href="" title="City"><img src="http://lorempixel.com/400/400/city" /></a></li> <li><a href="" title="Transport"><img src="http://lorempixel.com/320/320/transport" /></a></li> <li><a href="" title="Fashion"><img src="http://lorempixel.com/400/400/fashion" /></a></li> </ul><!--pics --> </body> </html>
The referenced stylesheet file is called gallerystyle.css which we will build later. I have also included a Google Font called “Nothing You Could Do” which is a cursive/handwriting font.
The HTML code in the body is creating a list of images that are being pulled randomly from Lorempixel.com. Just so that you know, this website allows you to create dummy images of different category and call them in your webpage for prototyping purposes (similar to lorem ipsum text). You can even define the size of the images that you want.
CSS
Next, make a new stylesheet file and name it gallerystyle.css. Save it in the same location where your HTML file is located. Copy the following code into it :-
* {margin:0;padding:0;list-style:none;}
body {background:url(bg.png);}
h1 {text-align:center;font-family:'Nothing You Could Do', cursive;padding:10px;text-shadow:1px 1px #333;background-color:#000;color:#fff;}
.pics {margin:auto;margin:0px auto;position:relative;height:500px;width:800px;}
.pics a {background:#fff;display:inline;float:left;width:auto;padding:10px 10px 30px 10px;text-align:center;text-decoration:none;color:#333;font-size:28px;font-family:'Nothing You Could Do', cursive;font-weight:bold;-webkit-box-shadow:0px 0px 10px rgba(0,0,0,1);-moz-box-shadow:0px 0px 10px rgba(0,0,0,1);box-shadow:0px 0px 10px rgba(0,0,0,1);-webkit-transition:all .30s;-moz-transition:all .30s;-o-transition:all .30s;transition:all .30s;position:absolute;}
.pics img {display:block;padding-bottom:20px;}
.pics a:hover {z-index:100;}
.pics a:after {content:attr(title);}In the above CSS code, we have made a container called .pics which will wrap all the images. The images are called in list items which are again wrapped in anchor links. We are applying general styling through .pics a to make our images look cool like Polaroid snaps by adding padding, border and drop shadow. We also add transition time which will help us animate the images when hovered.
So that we don’t have to write extra code for image captions, we are using the title attributes of the anchor links and making them show as content through CSS3.
Next add the following code to the stylesheet file again :-
/* Pictures placement, scaling and rotation */
.pics li:nth-child(1n) a {-webkit-transform:rotate(30deg) scale(0.7,0.7);-moz-transform:rotate(30deg) scale(0.7,0.7);transform:rotate(30deg) scale(0.7,0.7);top:0%;left:60%;}
.pics li:nth-child(2n) a {-webkit-transform:rotate(-30deg) scale(0.7,0.7);-moz-transform:rotate(-30deg) scale(0.7,0.7);transform:rotate(-30deg) scale(0.7,0.7);top:40%;left:80%;}
.pics li:nth-child(3n) a {-webkit-transform:rotate(40deg) scale(0.7,0.7);-moz-transform:rotate(40deg) scale(0.7,0.7);transform:rotate(40deg) scale(0.7,0.7);top:50%;left:-10%;}
.pics li:nth-child(4n) a {-webkit-transform:rotate(-30deg) scale(0.7,0.7);-moz-transform:rotate(-30deg) scale(0.7,0.7);transform:rotate(-30deg) scale(0.7,0.7);top:0%;left:-10%;}
.pics li:nth-child(5n) a {-webkit-transform:rotate(-20deg) scale(0.8,0.8);-moz-transform:rotate(-20deg) scale(0.8,0.8);transform:rotate(-20deg) scale(0.8,0.8);top:50%;left:20%;z-index:3;}
.pics li:nth-child(6n) a {-webkit-transform:rotate(30deg) scale(0.7,0.7);-moz-transform:rotate(30deg) scale(0.7,0.7);transform:rotate(30deg) scale(0.7,0.7);top:60%;left:55%;}
.pics li:nth-child(7n) a {-webkit-transform:rotate(10deg) scale(0.7,0.7);-moz-transform:rotate(10deg) scale(0.7,0.7);transform:rotate(10deg) scale(0.7,0.7);top:0%;left:25%;}We are using the nth-child property to control the rotation, scaling and placement of the images. This will sequentially find the list items and apply the styling to each one of them. This has been done like this, so that we don’t have to make classes for each image and style them individually. Now, you just have to change the image paths in the HTML code and the styling will be applied automatically. For now, there are 7 images. You can add new images and make new style by increasing the nth-child(8n…9n…10n) count. To make any image on top, the z-index for that image has to be increased. The higher the z-index will be, that image will be on top of any other with lower z-index.
Finally, add the following code to animate the images on hover. This will rotate and scale the images to their original sizes.
/* Pictures rotation and scaling on hover */
.pics li:nth-child(n) a:hover {-webkit-transform:rotate(0deg) scale(1,1);-moz-transform:rotate(0deg) scale(1,1);transform:rotate(0deg) scale(1,1);}You can see the working demo and download the files below :-
CSS3 Polaroid Gallery Demo
Download Files
What Next?
Leave a comment if you like this CSS3 Polaroid Gallery and if I get good number of requests, I can turn this into a FREE WordPress Theme for you people. 🙂
37 replies on “How to Make a CSS3 Polaroid Gallery”
This guide is really great for tour and travel.
This guide is really great for blogging. Thanks a ton for sharing the guide!
Great informational blog. Keep sharing.
Great post. Keep sharing.
Thanks for sharing.I found a lot of interesting information here. A really very thankful and hopeful that you will write many more posts like this one.
That was an amazing blog. Thanks a lot for sharing that post!
Great post!
Thanks for sharing this information,
it’s very interesting for me|
It’s so nice gallery. Thanks for sharing
Thanks for always sharing a good information here.
Great post! I’ve been looking for this topic and glad to see it here.
Wonderful information you’ve share to us, I’ll check back for more info.
This is the perfect site for anyone who hopes to find out about this topic. You understand so much its almost tough to argue with you .
Great content… Loved the post
Awesome! Thanks for sharing this information, it’s very interesting to read.|
Woe, I’ve been looking for this! Thanks so much for sharing this.
You have a nice article, I like the codes that you’re using for, This is greatly amazing!
Thanks so much for the codes. I will try it myself.
Excellent blog! you have a nice content.
I have a lot of knowledge from what you share, to say thank you, the information and knowledge here helps me a lot
thanks you for the nice post, i benefit a lot from this post…
Your current web-site is fairly quickly growing to be certainly one of my top feature. So, I just stumbled on creative weblog and I just need to state that this amazing is a nice blog post. Bless you pertaining to this kind of knowledge.
That’s a very good post, This post give truly quality information, I’m definitely going to look into it, Really very useful tips are provided here, Thanks for sharing.
WordPress themes, its very tough to find a simple and minimalist subject. I have noticed that increasingly folks that buy or down load WordPress themes are builders catering to their clients wishes. Even if the quit consumer tries to down load and configure a theme, its a daunting challenge for him because the modern-day day themes are becoming manner greater complex.
Thank you for posting such a great article! I found your website perfect for my needs
This is very educational content and written well for a change. It’s nice to see that some people still understand how to write a quality post!
This is the perfect site for anyone who hopes to find out about this topic. You understand so much its almost tough to argue with you (not that I really would want to…HaHa). You certainly put a brand new spin on a subject that’s been discussed for decades. Great stuff, just great!
Your all information so nice or helpful in our business.thaks for this sharing to this post here!
thanks for these codes , very goood
Thanks for sharing the code on polaroid gallery.
In really like ur post frnd…it is amazing…m also web designer nd blogger.
Thank you for the great post.
for web designer like me its useful , Now checking working demo then will implement on website 🙂
Thanks for sharing the code on polaroid gallery.
harika bilgiler thank you
thanks for this css trick. its awesome. however, i have a question for you. does the value of 1st n continue to increment event for the lest n elements? e.g
if we say li:nth-child(1n) what i know is that the value of n here is zero. now if i write onther list item behind this e.g li:nth-child(2n) will the value of n be zero or will it increment to one? thanks in advance
li:nth-child(1n)
li:nth-child(2n)
li:nth-child(3n)
great learning blog