Skip to content
Related Articles

Related Articles

Improve Article

CSS | Polaroid Images

  • Last Updated : 12 Jun, 2020

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.




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

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.




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

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.




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

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :