DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Create a Polaroid-like Image with CSS

Create a Polaroid-like Image with CSS

Paul Underwood user avatar by
Paul Underwood
·
Dec. 25, 12 · Interview
Like (1)
Save
Tweet
Share
15.47K Views

Join the DZone community and get the full member experience.

Join For Free

A polaroid picture is an iconic image of how pictures used to be. It is strange to see them on a computer but they are also a great way to display images. The images are placed on a white background with a caption underneath the images.

In this tutorial we are going to display images in a polaroid style using just CSS.

polaroid

View the demo to see what we are going to create.

Demo

To start off we are going to create the html for the polaroid gallery, all we are going to do for this is display images wrapped in a anchor tag link.

The links will need a title attribute as we will use this as the text for the image caption.

<div class="polaroid-images">
	<a href="" title="Cave"><img height="200" src="images/water.jpg" alt="Cave" title="Cave" /></a>
	<a href="" title="Island"><img height="200" src="images/water2.jpg" alt="Island" title="Island" /></a>
	<a href="" title="Islands Forest"><img height="200" src="images/water3.jpg" alt="Islands Forest" title="Islands Forest" /></a>
	<a href="" title="Decking"><img height="200" src="images/water4.jpg" alt="Decking" title="Decking" /></a>
	<a href="" title="Lake"><img height="200" src="images/water5.jpg" alt="Lake" title="Lake" /></a>
	<a href="" title="Mountains"><img height="200" src="images/water6.jpg" alt="Mountains" title="Mountains" /></a>
	<a href="" title="Forest"><img height="200" src="images/water7.jpg" alt="Forest" title="Forest" /></a>
	<a href="" title="Coast Valley"><img height="200" src="images/water8.jpg" alt="Coast Valley" title="Coast Valley" /></a>
</div>

For the polaroid image we are going to style the link wrapped around the image, this is so we can use the title attribute as the caption text at the bottom of the image. This is why we are going to style the anchor tag with the white background and padding to create the polaroid look.

At the bottom of the image we need the padding to be larger than the other sides as this is where we are going to place the caption text.

Add the below CSS to style your images like a polaroid picture.

.polaroid-images a
{
	background: white;
	display: inline;
	float: left;
	margin: 0 15px 30px;
	padding: 10px 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
	box-shadow: 0 4px 6px rgba(0,0,0,.3);
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	transition: all .15s linear;
	z-index:0;
}

At the moment there isn't a caption under the image, this is where we need to use the pseudo class :after to create a new element after the anchor tag. The benefit of doing this is that we can use the CSS property content to get the title attribute from the anchor tag.

Add the following to add the caption on to the image.

.polaroid-images a:after {
	color: #333;
	font-size: 20px;
	content: attr(title);
	position: relative;
	top:15px;
}

To make sure that the image will always fit the polaroid area, add the following line.

.polaroid-images img {
	display: block;
	width: inherit;
}

Rotate The Images

Just displaying images which look like a polaroid picture isn't enough, we need to add a bit more interaction to the images. We can make it look like the pictures have just been thrown down for you pick up. To make the images look like they have been thrown down we can rotate them slightly in a random order.

To create the random rotations we use the nth-child selector to go through all the images and rotate them differently depending on what order they are placed on the page.

.polaroid-images a:nth-child(2n)
{
	-webkit-transform: rotate(4deg);
	-moz-transform: rotate(4deg);
	transform: rotate(4deg);
}
.polaroid-images a:nth-child(3n) {
	-webkit-transform: rotate(-24deg);
	-moz-transform: rotate(-24deg);
	transform: rotate(-24deg);
}
.polaroid-images a:nth-child(4n)
{
	-webkit-transform: rotate(14deg);
	-moz-transform: rotate(14deg);
	transform: rotate(14deg);
}
.polaroid-images a:nth-child(5n)
{
	-webkit-transform: rotate(-18deg);
	-moz-transform: rotate(-18deg);
	transform: rotate(-18deg);
}

To create a picked up motion we can use the hover event of the mouse. As the images will be slightly rotated on the screen the hover event will scale the image and reset the rotation back to zero.

On the hover event we set the rotation back to 0, add a scale of 120% and add a box shadow to the box to make it look like it is moving away from the page.

.polaroid-images a:hover{
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
        transform: rotate(0deg);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
        transform: scale(1.2);
	z-index:10;
	-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
        box-shadow: 0 10px 20px rgba(0,0,0,.7);
}

That's all the CSS you need to create a polaroid image gallery.

View the demo to see how it turns out.

Demo



CSS

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Core Machine Learning Metrics
  • The 31 Flavors of Data Lineage and Why Vanilla Doesn’t Cut It
  • Apache Kafka vs. Memphis.dev
  • Tech Layoffs [Comic]

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: