polaroid pfp w/ custom name and hover animation

Tags: polaroid, css, fancy, life is strange, indie, cute, simple

Description:

changes pfp into a polaroid that grows when hovered. name displayed on polaroid can be changed via simple setting section at the top of the code

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Valentine (https://layouts.spacehey.com/layout?id=30594) -->

<style>
:root {
--polaroid-name: ".:maxine:."; /* name displayed on polaroid */
--name-size: 1.6em; /* font size of name */
--toggle-displayname: none; /* change this to "initial" to restore display name */
}
@font-face {
font-family: 'teabeer';
src: url('https://fluorescent-lights.neocities.org/teabeer.ttf') format('truetype');
}
.profile h1 {
display: var(--toggle-displayname);
}
.general-about .profile-pic {
position: relative;
filter: drop-shadow(0 0 0.25rem gray);
transform: rotate(4deg);
margin: 0 20px 8px -5px;
transition: transform .5s;
}
.general-about .profile-pic:hover {
transform: scale(1.2) rotate(-3deg);
}
.general-about .profile-pic:before {
content: var(--polaroid-name);
font-family: 'teabeer';
font-size: var(--name-size);
position: absolute;
z-index: 2;
bottom: -30px;
left: 0px;
width: 100%;
text-align: center;
}
.general-about .profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/polaroid.png');
position: absolute;
background-size: contain;
background-repeat: no-repeat;
top: -5px;
left: -5px;
width: 170px;
height: 210px;
}
.mood {
margin-top: 50px;
}
</style>

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.

Comments

Displaying 20 of 514 comments ( View all | Add Comment )

frankie	1778875042 Usingg Report Comment
𝕴𝖓𝖊𝖝𝖈𝖚𝖘𝖆𝖇𝖑𝖊 𝕰𝖛𝖎𝖑	1778616813 Using.. Report Comment
Nighth4wk3	1778513397 using Report Comment
Bonbette🌹	1778330475 using! this is super cute. Report Comment
hi im elliot yes	1778154733 using! Report Comment
K3i1k0	1778089311 AKAJKAJAKA Report Comment
MosquitoKiller	1777977912 USING RAHHH Report Comment
XxYandereRin111xX	1777637212 using! xx Report Comment
ArisValkova	1776867183 beatbooxxx using brah Report Comment
ıllıllı PR0T0TYPe ıllıllı	1776791247 USINGG Report Comment
That_one_weird_mf1	1776626349 Usingg ^^ Report Comment
Rachel Amber	1776352317 using !! x Report Comment
sarah952	1776098240 usinggg !!! Report Comment
Kaii's Garage	1776022395 using! Report Comment
katanA	1775877398 USING Report Comment
Dani Bel	1775743139 Usando ^^, es súper bonito Report Comment
L!liavnrgjlly_	1775716065 usingggg Report Comment
Sata.	1775666433 Using. Report Comment
gracie_	1775557531 ITS SO PRETTY USING!! Report Comment
Kakanheart	1775404123 Using! Report Comment