WordPress Themes Blog Oh! Blog

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.


First, make a new HTML file and copy the following code into the file :-

<!doctype html>
<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'>

<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 -->

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.


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. 🙂

  1. Grace Steffan left a comment on February 8, 2021 at 4:47 am |

    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.

  2. Martin Gussa left a comment on January 22, 2021 at 5:25 am |

    That was an amazing blog. Thanks a lot for sharing that post! Bright Dip Anodizing

  3. greyasanna greyasanna left a comment on January 1, 2021 at 1:14 pm |

    Green Roads relax bears are said to relieve pain, https://cbdgummiesforpain.org/reviews/greenroads-gummies promote high-quality sleep and improve overall health. Check out the diversity of products to make the right choice.

  4. battologyroot left a comment on December 21, 2020 at 5:31 am |

    Qatar is considered to be a large nation because of its total area. Its total land area is 11,586 km² (approx. 4,473 mi²). Continental shelf of Qatar is approximately 31,590 km² (around 12,197 mi²). Qatar is located in Asia. Asia is the world’s largest and most populous continent. http://www.confiduss.com/en/jurisdictions/qatar/geography/

  5. Frisco TX left a comment on December 11, 2020 at 10:14 am |

    Great post! At Frisco Car Detailing, we appreciate the WordPress tutorials. We’ve been working on our car detailing website, but we are far from finished. If you’re interested in providing feedback, then you can visit http://www.friscocardetail.com/ . We’d love to hear from y’all!

  6. parsa left a comment on November 10, 2020 at 12:55 am |

    Thanks for sharing this information,
    it’s very interesting for me|

  7. Joe left a comment on October 9, 2020 at 3:38 am |

    It’s so nice gallery. Thanks for sharing mapquest driving directions

  8. beanter8 left a comment on July 25, 2020 at 4:09 am |

    Love that he please keep forever Can’t let love fly by The tearing tear in my eyes hurts me so much. tetris

    • Halena left a comment on December 10, 2020 at 8:54 am |

      Creating a CSS gallery is one of the best skill and many students also want to learn this type of skills and they also research related to the CSS gallery and collect information about CSS. as a student of nursing also create a Nursing Assignment Writing Service website in the UK that’s why I read different topic related to the development.

  9. tetris left a comment on July 25, 2020 at 4:09 am |

    I still can’t believe you changed The words when love is like clouds Gently flutter accidentally white. skribbl io

  10. Kaitlyn left a comment on June 18, 2020 at 6:12 am |

    Thanks for always sharing a good information here. hammtreeservice.com/

  11. Brett left a comment on May 14, 2020 at 7:51 am |

    Great post! I’ve been looking for this topic and glad to see it here. https://hammtreeservice.com/

  12. Patsy J. Moore left a comment on March 26, 2020 at 8:42 pm |

    Wonderful information you’ve share to us, I’ll check back for more info. And get to know about bowmasters game for free now!

  13. Gabriel Welch left a comment on March 20, 2020 at 11:39 pm |

    The pictures are brought in list things which are again enclosed by grapple joins. We are applying general styling through .pics to make our pictures look cool like Polaroid snaps by including cushioning, outskirt and drop shadow.
    Best Content Writing Services

  14. Caroline Herzog left a comment on March 4, 2020 at 11:37 pm |

    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 .

  15. urdu novels left a comment on February 23, 2020 at 7:03 am |

    Great content… Loved the post

  16. KZee left a comment on December 19, 2019 at 8:14 am |

    Awesome! Thanks for sharing this information, it’s very interesting to read.| printingproslittlerock.com

  17. Mary Kay left a comment on October 22, 2019 at 8:39 am |

    Woe, I’ve been looking for this! Thanks so much for sharing this.

  18. Dan left a comment on October 1, 2019 at 12:00 am |

    You have a nice article, I like the codes that you’re using for, This is greatly amazing! Thanks Take this

  19. Darius Oliver left a comment on September 19, 2019 at 9:44 am |

    Thanks so much for the codes. I will try it myself. apply now

  20. Dan left a comment on July 31, 2019 at 7:20 am |

    Excellent blog! you have a nice content. | enjoymexico.net/

  21. jonh left a comment on July 29, 2019 at 1:49 am |

    I have a lot of knowledge from what you share, to say thank you, the information and knowledge here helps me a lot wings.io

  22. casseverhart13 left a comment on July 24, 2019 at 3:58 am |

    thanks you for the nice post, i benefit a lot from this post…
    tree service

  23. fredluis left a comment on July 24, 2019 at 1:02 am |

    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. shower remodel

  24. Joshua A. Price left a comment on May 10, 2019 at 3:30 am |

    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. tree removal

  25. Edina Clark left a comment on December 2, 2018 at 9:27 am |

    Simfoni’s Spend Analytics solution is a new breed of Machine Learning enabled Spend Analytics Tool. Virtuosi™ Analytics – built for procurement professionals, by procurement professionals is the tool used by Spend Analysis Consulting specialists at Simfoni. Contact Simfoni today to know more about how Simfoni’s technology and processes can help your organization achieve world-class Spend Analytics, Savings Tracking & Tail Spend Management Solutions.

  26. blakelively left a comment on October 23, 2018 at 12:02 am |

    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.best Assignment Writing service UK

  27. kinju left a comment on July 6, 2018 at 1:32 am |

    Thank you for posting such a great article! I found your website perfect for my needs
    Best Homemade Pregnancy Tests

  28. Eric Mack left a comment on June 25, 2018 at 5:43 am |

    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!

    You and your blog really help me to build this site – https://facetime4pc.com/

  29. HGIT left a comment on May 27, 2018 at 7:38 pm |

    Huagong Innovation Technology Co.,Ltd.HGIT is a professional provider of polyurethane automatic equipment and sealing system solutions.The company is located in the beautiful coastal city —Dalian. HGIT equipment of Huagong has a number of independent intellectual property rights,and also has the features of stable,secure,reliable etc. E-mail?hgcx@vip.163.com,info@hgcx.cn TEL? +86-411-39525022 FAX? +86-411-39525009 Website?http://www.hgcx.cn/en foaming machine CNC PU Seal Pouring Machine Foam sealing gasket machine Injection (Potting) Machine barrier-strip foam technique Spraying cementing machine Foam sealing machine (FIPFG) PU gasket sealing machine Warm Edge Spacer Forming Machine

  30. smith left a comment on May 11, 2018 at 5:04 am |

    Your all information so nice or helpful in our business.thaks for this sharing to this post here!

  31. ??????? ???????? left a comment on May 16, 2016 at 2:31 pm |

    thanks for these codes , very goood

  32. huagong left a comment on March 21, 2016 at 9:38 pm |

    HGIT is the professional manufacturer for two axis foam sealing machine, this machine can be used in Filter, cabinet, lighting, battery, etc.
    German Beckhoff dispensing operation system. Operation interface is indicated in both Chinese and English; if there is any need, other languages can be added. The system boasts functions such as false operation reminding, idiot-proof protection, overpressure alarming, temperature alarming and low material level reminding.
    When operating the human-machine interface, the operator only needs to enter commands in the interface such as “Confirm” and “Start” for loading and unloading of workpieces, and then the equipment can automatically complete the required function operations.
    The control system is CNC2013 control system independently researched and developed by the Company. It can control multiple axes simultaneously and control dispensing speed and glue flow, with multi-formula storage function, pressure alarming function, etc. which makes it safer and user-friendly.
    The dispensing valve and mixer match with each other well, easy to operate and convenient for maintenance.
    Two components metering pump can choose Domestic pump or Germany pump according to customer demand

  33. Rita B. clark left a comment on July 25, 2015 at 11:25 am |

    Thanks for sharing the code on polaroid gallery.

  34. Dalvir Kaur left a comment on June 6, 2015 at 2:05 am |

    In really like ur post frnd…it is amazing…m also web designer nd blogger.

  35. Bhumi left a comment on February 18, 2015 at 7:14 am |

    Thank you for the great post.

  36. Objects left a comment on January 16, 2015 at 6:13 am |

    for web designer like me its useful , Now checking working demo then will implement on website 🙂

  37. Imtiaj left a comment on January 9, 2015 at 4:12 am |

    In order to add photos to your gallery, you need to edit them to fit your need. Movavi is one of the best photo editor that is very easy to use. See my review of Movavi Photo Editor here – http://www.pcappspot.com/movavi-photo-editor-review/

  38. free wordpress themes left a comment on December 22, 2014 at 1:46 pm |

    Thanks for sharing the code on polaroid gallery.

  39. mersin evden eve left a comment on November 11, 2014 at 8:46 am |

    harika bilgiler thank you

  40. gikarasojo left a comment on August 21, 2014 at 8:29 am |

    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


Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
Need a Custom Website?

Leave a Feedback

Tell Me About Your Project