Polaroid
How do I make an polaroid?
Polaroid picture holder with overlay.. What is a polaroid? How do you make a polaroid? This script and codes were developed by B. on 21 December 2022, Wednesday.
Polaroid Previews
Polaroid - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Polaroid</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
body { background-color: #ebebeb; color: #555559; font-size: 100%; font-weight: normal; font-style: normal; line-height: 1.5; margin: 0; -webkit-font-smoothing: antialiased;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: 400;
}
.module { text-align: center;
}
.is-centred { display: inline-block; vertical-align: middle; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.dash { display: block; height: 1.625em; line-height: 1.4;
}
.polaroid { background-color: white; letter-spacing: 0.125em; margin: 1.25% 1%; padding: 0.500em; text-align: center; max-width: 20.313em; width: 100%; display: inline-block; vertical-align: top;
}
.polaroid__link { overflow: hidden; display: block; position: relative;
}
.polaroid__link:hover .polaroid__content, .polaroid__link:focus .polaroid__content { opacity: 0;
}
.polaroid__media { width: 100%; vertical-align: bottom;
}
.polaroid__content { background-color: #dfc9a2; background-color: rgba(223, 201, 162, 0.9); color: white; display: block; height: 100%; width: 100%; left: 0; top: 0; position: absolute; opacity: 1; overflow: hidden; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
.polaroid__content:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;
}
.polaroid__content h2, .polaroid__content h3 { letter-spacing: 0.125em; line-height: 1; margin: 0; text-transform: uppercase;
}
.polaroid__content p { letter-spacing: 0.125em; margin: 0;
}
.polaroid__header { background-color: white; margin: 0; padding: 1em 0 0.5em 0;
}
.polaroid__header p { color: #dfc9a2; line-height: 1; margin: 0;
}
.polaroid__heading { line-height: 1; margin: 0;
}
@media all and (min-width: 43.75em) { .polaroid { margin-right: 1%; margin-left: 1%; width: 96%; }
}
@media all and (min-width: 56.25em) { .polaroid { width: 31%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="module">
<section class="polaroid grp"> <a class="polaroid__link" href="/how-to-do/beach-waves/"> <img class="polaroid__media" src="http://placehold.it/293x313"> <div class="polaroid__content"> <div class="is-centred"> <h2>Heading</h2> <p>Title<br><span>•</span></p> </div> </div> </a> <header class="polaroid__header"> <h3 class="polaroid__heading">Sub Heading</h3> <span class="dash">-</span> <p>Sub Title</p> </header>
</section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Polaroid - Script Codes CSS Codes
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
body { background-color: #ebebeb; color: #555559; font-size: 100%; font-weight: normal; font-style: normal; line-height: 1.5; margin: 0; -webkit-font-smoothing: antialiased;
}
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: 400;
}
.module { text-align: center;
}
.is-centred { display: inline-block; vertical-align: middle; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.dash { display: block; height: 1.625em; line-height: 1.4;
}
.polaroid { background-color: white; letter-spacing: 0.125em; margin: 1.25% 1%; padding: 0.500em; text-align: center; max-width: 20.313em; width: 100%; display: inline-block; vertical-align: top;
}
.polaroid__link { overflow: hidden; display: block; position: relative;
}
.polaroid__link:hover .polaroid__content, .polaroid__link:focus .polaroid__content { opacity: 0;
}
.polaroid__media { width: 100%; vertical-align: bottom;
}
.polaroid__content { background-color: #dfc9a2; background-color: rgba(223, 201, 162, 0.9); color: white; display: block; height: 100%; width: 100%; left: 0; top: 0; position: absolute; opacity: 1; overflow: hidden; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
}
.polaroid__content:before { content: ''; display: inline-block; height: 100%; vertical-align: middle;
}
.polaroid__content h2, .polaroid__content h3 { letter-spacing: 0.125em; line-height: 1; margin: 0; text-transform: uppercase;
}
.polaroid__content p { letter-spacing: 0.125em; margin: 0;
}
.polaroid__header { background-color: white; margin: 0; padding: 1em 0 0.5em 0;
}
.polaroid__header p { color: #dfc9a2; line-height: 1; margin: 0;
}
.polaroid__heading { line-height: 1; margin: 0;
}
@media all and (min-width: 43.75em) { .polaroid { margin-right: 1%; margin-left: 1%; width: 96%; }
}
@media all and (min-width: 56.25em) { .polaroid { width: 31%; }
}
| Developer | B. |
| Username | wearebold |
| Uploaded | December 21, 2022 |
| Rating | 3 |
| Size | 4,152 Kb |
| Views | 32,384 |
Do you need developer help for Polaroid?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
B. (wearebold) Script Codes
| Name | Size |
| Particle Earth Map | 5,106 Kb |
| Alerts | 2,726 Kb |
| Slick Slider with Vimeo API - froogaloop | 3,822 Kb |
| Snap.svg Mask faces | 3,545 Kb |
| Pure CSS3 Batman Logo | 4,527 Kb |
| Plane, Goodbye | 9,358 Kb |
| Center the Unknow | 2,434 Kb |
| Instagram Feed with Lightbox2 | 2,895 Kb |
| Simple Accordion | 3,683 Kb |
| Pure CSS3 Robot with JS clocks | 7,759 Kb |
Create amazing captions with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
| Weather App | OmranAbazid | 2,596 Kb |
| Simple canvas drawing -- simplified lines | Anandthakker | 3,127 Kb |
| Force Counter | Kenlauguico | 2,732 Kb |
| RWD- Mostly Fluid Layout Pattern | Marcocastro | 2,312 Kb |
| Css3 loader | Clknap | 2,391 Kb |
| Headroom.js demo | WickyNilliams | 3,982 Kb |
| Starfield using KineticJS | Asp | 3,512 Kb |
| We Simplify animation | Meodai | 48,169 Kb |
| Canvas stripes | Adrianparr | 1,948 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!