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:
