A Polaroid image is an image box with a caption below it. In this article, you will learn to create polaroid images using HTML and CSS. This can be done either by using the HTML <div> or <figure> tags.
1. Using div: The polaroid image is created by using the HTML div tag and by adding CSS properties as shown below. Use image width to 100% to make it as wide as its parent.
2. Using figure and figcaption element: In the following example, polaroid image is created by using the HTML5 figure tag. The figure tag has some default margin. A box-shadow is added to it so that it isolates itself from the background.
Creating a polaroid photo gallery: The user can add as many polaroids as per the requirement and create a gallery.
Example: The “display: flex” property makes the figures align in a row which normally would have been on separate lines. By default the gallery div covers the entire width. So width is changed and “margin: auto” property is added to make the gallery centered. The “justify-content: space-between” is used to align the figures and create equal spaces between them. The “flex-wrap: wrap” is used to make the figures wrap up and move items to next row when the row is fully occupied.
- Bootstrap 4 | Images
- CSS | Border Images
- CSS | Styling Images
- HTML | Images
- Semantic-UI | Images
- How to set multiple background images using CSS?
- How to put images in a box without space using Bootstrap?
- How to display images in Angular2 ?
- How to use grid for images in bootstrap card ?
- SASS variable for images path
- HTML | DOM images Collection Property
- Responsive images in Bootstrap with Examples
- How to download Google Images using Python
- How to align images in card with dynamic title?
- Why card images use data-src (not src) for image in Bootstrap 4 ?
- How to display multiple horizontal images in Bootstrap card ?
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- How to Display Validation Message for Radio Buttons with Inline Images using Bootstrap 4 ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.