CSS | Polaroid Images

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            background-color: #faeee7;
        }
  
        .card {
            width: 20%;
            background-color: white;
            margin: 3%;
            border: 1px solid;
        }
  
        .card-txt {
            text-align: center;
            padding: 10px;
        }
    </style>
  
</head>
  
<body>
    <div class="card">
        <img src="gfg.png" alt="gfg img" 
                width="100%">
        <div class="card-txt">
            <p>GeeksforGeeks</p>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        figure {
            width: 20%;
            background-color: white;
            box-shadow: 5px 5px 5px #4d4d4e;
        }
  
        figcaption {
            text-align: center;
            padding: 10px 20px;
        }
    </style>
</head>
  
<body>
    <figure>
        <img src="gfg.png" 
            alt="gfg img" width="100%">
        <figcaption>
            <p>Computer Science</p>
        </figcaption>
    </figure>
</body>
  
</html>

chevron_right


Output:



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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  
    <style>
        body {
            background-color: #f4f7c5;
        }
  
        .gallery {
            display: flex;
            margin: auto;
            width: 800px;
            justify-content: space-between;
            flex-wrap: wrap;
        }
  
        figure {
            width: 170px;
            margin: 10px 0;
            background-color: white;
            border: 1px solid;
        }
  
        figcaption {
            text-align: center;
            padding: 10px;
        }
    </style>
  
</head>
  
<body>
  
    <div class="gallery">
        <figure>
            <img src="gfg.png" width="100%">
            <figcaption>GFG IMAGE 1</figcaption>
        </figure>
        <figure>
            <img src="gfg.png" width="100%">
            <figcaption>GFG IMAGE 2</figcaption>
        </figure>
        <figure>
            <img src="gfg.png" width="100%">
            <figcaption>GFG IMAGE 3</figcaption>
        </figure>
        <figure>
            <img src="gfg.png" width="100%">
            <figcaption>GFG IMAGE 4</figcaption>
        </figure>
        <figure>
            <img src="gfg.png" width="100%">
            <figcaption>GFG IMAGE 5</figcaption>
        </figure>
        <figure>
            <img src="gfg.png" width="100%">
            <figcaption>GFG IMAGE 6</figcaption>
        </figure>
        <figure>
            <img src="gfg.png" width="100%">
            <figcaption>GFG IMAGE 7</figcaption>
        </figure>
        <figure>
            <img src="gfg.png" width="100%">
            <figcaption>GFG IMAGE 8</figcaption>
        </figure>
    </div>
  
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.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.