Coders' Guidebook

Create polaroid images for your website using HTML and CSS

Polaroids are an attractive way to present images (and their captions) on your website. This tutorial will walk you through how to create the polaroids, style them, and make them functional (e.g. use the polaroids as links).

river.jpeg

A scenic nature walk

HTML code for a polaroid

The first step when creating a polaroid is to add some opening and closing 'div' tags to your HTML file. Also, assign the opening div tag a class (e.g. 'polaroid'):

<div class="polaroid">
</div>

Inside the 'div' tags, insert the image you wish to use for the polaroid. For this example, we will use an image named 'river.jpeg'.

river.jpeg

When you add the image to your HTML file you should also assign it a class such as 'polaroid-image' for styling purposes. If the river image is in the same folder as the HTML file then the code should look like this (for guidance on how to link to images in other folders see this tutorial):

<img src="river.jpeg" class="polaroid-image">

To add a caption to the polaroid, insert a heading below the image. Assign the heading a class (e.g. 'caption') so we can style the caption later:

<div class="polaroid">
	<img src="river.jpeg" class="polaroid-image">
	<h3 class="caption">A scenic nature walk</h3>
</div>

That is the core HTML code required for a polaroid. If you load the webpage now though, the polaroid may not look quite how you expected. This is because the components of our polaroid still need to be styled using your 'main.css' stylesheet.

CSS code for a polaroid

The first component we will style will be the polaroid-image class. Any CSS code applied here will target the image in your polaroid:

.polaroid-image {
	width: 100%;
	border-radius: 25px 25px 0 0;
	height: 40vh;
}

Setting the width to 100% will ensure the image is as wide as the parent element, which in this case is the div tag assigned the class 'polaroid'. The border-radius configuration used above will round the top left and top right corners of the image. Setting a specific height value is important because it ensures all polaroid images are equal in size.

After styling the image, the next step will be to style the polaroid class. Any CSS code applied here will modify the overall appearance of the polaroid:

.polaroid {
	height: auto;
	width: 40%;
	margin: auto;
	background-color: white;
	border-radius: 25px;
	box-shadow: 2px 4px 8px 3px Gainsboro;
}

The above CSS code does the following:

  • The height is set to 'auto' to ensure the polaroid will resize automatically and accommodate smaller/larger captions. If you set the height to a specific value (e.g. 700px) then you may notice your caption spilling outside the polaroid (especially when viewed on smaller screens).
  • The 'width' determines how wide the polaroid will be.
  • Set the margin to 'auto' so any space between the polaroid and other elements is distributed evenly.
  • The 'background-color' determines what colour will provide a backdrop to the caption.
  • While we have already applied a border-radius to the polaroid image, declaring the property again here ensures the bottom corners of the polaroid (below the caption) are rounded too. Ideally the .polaroid-image and .polaroid CSS entries will use the same border-radius value (e.g. 25px).
  • Adding a subtle shadow to the polaroid can help it look more attractive.

With the image and overall polaroid taken care of, the only component left to style is the caption:

.caption {
	padding: 0 20px 20px 20px;
}

Adding padding to the caption is essential. It ensures the caption box will stretch to accommodate the size of the text, thereby preventing lengthy captions from spilling out the polaroid:

river.jpeg

A scenic nature walk

Congratulations! You now have learned how to add a polaroid image and caption to your website. The rest of this tutorial will explore some additional features you might like to incorporate into your polaroids:

Responsive (mobile-friendly) polaroids

You may notice your polaroids become 'squashed' when viewed on small devices, especially if you have multiple polaroids arranged side-by-side in a gallery. The solution is to make your polaroids responsive to smaller screen sizes (such as mobile phones) and adjust their size and positioning accordingly. The following CSS code will make the polaroids get bigger and stack one-by-one when viewed on small screens:

@media screen and (max-width: 650px) {
	.polaroid {
		width: 96%;
		margin: 2%;
	}
}

The first line of code @media screen and (max-width: 650px) specifies the screen size at which the CSS code will become effective. In the above example, the CSS code will only apply when the webpage is loaded on browser windows less than 650px wide. When that threshold is reached, the polaroids will become 96% as wide as their parent element (e.g. the body) and develop a margin of 2%. If you notice your polaroid is not quite centrally aligned in the browser on small screens then you may need to adjust the margin.

Highlighting polaroids when hovered over

This section will cover how to emphasise your polaroids when the user hovers over them with their mouse. It's quite a simple process and just involves adding an extra entry to the CSS stylesheet:

.polaroid:hover {
	box-shadow: 4px 8px 16px 6px Gainsboro;;
}

In the above code, we add :hover after the polaroid class. This ensures the CSS code will only apply when polaroid is hovered over. We then declare a box-shadow property with larger values than were used previously in the standard '.polaroid' entry. Using larger values means the shadow around the polaroid will expand when hovered over. This will help emphasise the polaroid and make the webpage a little more interactive. You can see the hover function in action below.

river.jpeg

A scenic nature walk

<<< Previous

Next >>>