How to Create Polaroid Photo Frames Widget with CSS on Blogger

Images and photos are one of the things that must be displayed in a blog, this is commonly used to clarify the content of the articles we create.Currently there are many types of images that we can use to beautify images.We will share how to create photo frames such as polaroids using CSS. For more details, please see the picture below demo link.

Demo

To see firsthand how this widget looks, you can directly see it at the link below:

Live Demo

Add a Polaroid Photo Frame CSS

1. On Blogger dashboard, click Theme
2. Click the arrow down icon next to 'customize' button
3. Click Edit HTML you will be directed to editing page
4. Find </style> or ]]></b:skin> tag, for a faster search press shortcut key Ctrl + F
5. Copy below CSS code and paste above </style> or ]]></b:skin>

/* Polaroid Photo Effect by thewebtrick.com */figure, figcaption {
display: block;
}
#polaroid{
width:100%;
padding:0px 10px;
margin:auto;
text-align: center;
}
#polaroid figure{
position:relative;
width: auto;
max-width: 100%; /* Maximum width of the image */
margin: 20px auto 0px;
padding: 6px 8px 10px 8px;
display:inline-block;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background-color: #eee6d8;
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden;
}
#polaroid figure:nth-child(even) {
margin:20px 18px 20px 25px;
-webkit-transform:rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
-webkit-backface-visibility:hidden;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#polaroid figure:before {
content: '';
display: block;
position: absolute;
left: 5px;
top: -10px;
width: 75px;
height: 25px;
z-index: 1;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#polaroid figure:nth-child(even):before {
left:unset;
right:10px;
top:-10px;
width: 55px;
height: 25px;
z-index: 1;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#polaroid img{
max-width: 100%;
width: 100%;
height: auto;
}
#polaroid figcaption{
text-align:center;
font-family: cursive, Arial, Helvetica, sans-serif;
color:#454f40;
font-style:italic;
letter-spacing:0.09em;
margin-top:10px;}

6. Click save

max-width: 400px is the maximum width in the image, if you want the width to follow the original image that you uploaded please change it to max-width: 100%.

---

How to Write HTML Code on a Post

There is easiest way to place a HTML code on the Blogger and paste all the HTML code below.

<div id="polaroid">
  <figure>
    <img src="URL_IMAGE_HERE" alt="Write an SEO Friendly Title" title="Write an SEO Friendly Title"/>
    <figcaption>Caption image</figcaption>
  </figure>
</div>

The caption in this image will not be read in the article description/snippet. You can also choose to keep the captions legible on the article snippets.

If you want to delete the image caption please delete the <figcaption >Caption </figcaption>.

You May Like These Posts:

Go to Link