Tags: polaroids, pictures, custom, customize, customizable, photos, photo, polaroid

Description:

Add this code to any layout to get customizable Polaroids with captions on the top and sides of your page.

Hover over a Polaroid to view the whole thing.

Click here to view it live on my blog and give kudos if you feel like it.

Leave a comment somewhere if you like it and you think I should know.

If you use it, give me credit in the form of a bulletin, blog post, etc. please 😘

Note: Layouts with large top banners might have unexpected results. Send me a message or a comment if you have any questions.

Important:

• This code goes at the VERY BOTTOM of your About Me section.
• The polaroids will be blank when you first input this code. You need to host your images somewhere, then copy and paste the direct links into the top of the code as "image1, image2, image3" etc. in the code.
• Like the photos, the captions on the polaroids will be empty when you first input the code. Instructions for changing the caption are below.
• The photos and captions are coordinated. When you're putting in the caption, look for the "image#" to know which image you're captioning.
• Copy and paste the code from your "About Me" into your blogs if you want them to have this layout, too.

How to put your own pictures in:

1. Pick 12 images to use and upload them to any image-hosting site.
2. At the top of the code, input the direct links to your images in place of the hashtag. Do not delete the quotation marks, or else your images will not appear.

3. Save.

How to put your own captions in:

1. Scroll down to the bottom of the code, where you see code that looks like this:

2. Between <div class="caption"> and </div>, write your caption. Like this:

3. Save.

Preview:

Code:

<!-- (c) Layout created by cristiana (https://layouts.spacehey.com/layout?id=1866) --> <style> :root { --image1: url("#"); --image2: url("#"); --image3: url("#"); --image4: url("#"); --image5: url("#"); --image6: url("#"); --image7: url("#"); --image8: url("#"); --image9: url("#"); --image10: url("#"); --image11: url("#"); --image12: url("#"); --image13: url("#"); --image14: url("#"); } .container { margin-top: 300px; } .side-photos { display: flex; flex-direction: column; align-items: center; position: absolute; top: 300px; width: 270px; } .banner { display: flex; flex-direction: row; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 300px; padding: 30px; } .side-photos.leftside { left: -20px; } .side-photos.rightside { right: -20px; } .polaroid { background: white; height: 266px; width: 214px; box-shadow: 5px 5px 10px #515151; padding: 12px; } .banner:hover, .side-photos:hover { z-index: 1; } .polaroid:hover { z-index: 1; } .banner.polaroid:not(div:first-child) { margin-left: -10px; } .side-photos.polaroid { margin-top: -10px; } .image { height: 190px; width: 190px; background-color: grey; background-size: cover; background-position: center; } #image1 { background-image: var(--image1); } #image2 { background-image: var(--image2); } #image3 { background-image: var(--image3); } #image4 { background-image: var(--image4); } #image5 { background-image: var(--image5); } #image6 { background-image: var(--image6); } #image7 { background-image: var(--image7); } #image8 { background-image: var(--image8); } #image9 { background-image: var(--image9); } #image10 { background-image: var(--image10); } #image11 { background-image: var(--image11); } #image12 { background-image: var(--image12); } #image13 { background-image: var(--image13); } #image14 { background-image: var(--image14); } .skewleft { transform: rotate(20deg); } .skewright { transform: rotate(-20deg); } .caption { display: flex; align-items: center; justify-content: center; max-width: 100%; height: 64px; overflow: hidden; text-align: center; line-height: 24px; color: #0f2440; } #credit { position: fixed; bottom: 3px; left: 3px; font-family: sans-serif; font-size: 10px; color: black; background: white; padding: 2px; border-radius: 2px; z-index: 5; letter-spacing: 1px; } @media screen and (max-width: 800px) { .container { margin-top: 525px; } .polaroid { height: 125px; width: 100px; padding: 10px; } .image { width: 80px; height: 80px; } .caption { height: 33px; font-size: 10px; line-height: 14px; margin: 1px 0; } .side-photos { flex-direction: row; top: 150px; } .side-photos.leftside { left: 30px; top: 275px; } .side-photos.rightside { right: 60px; top: 400px; } .banner { height: auto; flex-wrap: wrap; } } </style> <div class="banner flex-row"> <div class="polaroid skewleft"> <div class="image" id="image1"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image2"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image3"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image4"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image5"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image6"></div> <div class="caption"></div> </div> </div> <div class="side-photos leftside"> <div class="polaroid skewright"> <div class="image" id="image7"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image8"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image9"></div> <div class="caption"></div> </div> </div> <div class="side-photos rightside"> <div class="polaroid skewleft"> <div class="image" id="image11"></div> <div class="caption"></div> </div> <div class="polaroid skewright"> <div class="image" id="image12"></div> <div class="caption"></div> </div> <div class="polaroid skewleft"> <div class="image" id="image13"></div> <div class="caption"></div> </div> </div> <div id="credit"> layout by <a href="https://www.spacehey.com/cristiana">cristiana</a> </div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.