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 535 comments ( View all | Add Comment )

Brianna	1783143457 Using, thanks!! Report Comment
Hearts4RoxieXx	1782893990 usingg !! Xpp Report Comment
⋆˚࿔ bee ｡⁠.ﾟ⁠+	1782863747 using Report Comment
meryem	1782197921 using! Report Comment
𝄞 𝘚𝘰𝘭𝘢𝘪𝘳𝘦 .ᐟ 🌸	1781950639 Usingg Report Comment
sarah952	1781937033 usin!!!! Report Comment
Benny 𝄞	1781090029 using Report Comment
Shawn	1781076351 Using Report Comment
z1dwlei	1780961011 Used, Thanks ^^ Report Comment
z1dwlei	1780960987 Used, Thanks ^^ Report Comment
z1dwlei	1780960987 Used, Thanks ^^ Report Comment
† ᡕᠵデᡁ᠊╾━	1780724574 use Report Comment
nana🐇་༘	1780713109 usingg!! Report Comment
Nkole	1780394481 using! Report Comment
Nkole	1780394481 using! Report Comment
M	1779937097 Using Report Comment
Meika	1779917970 using < 3 Report Comment
.ℂ𝕒𝕝𝕚𝕗𝕠𝕣𝕟𝕚𝕒 𝕜𝕚𝕝𝕝𝕛𝕠𝕪.	1779828165 using Report Comment
kruva	1779675005 usandoo Report Comment
kruva	1779674523 usandoooo Report Comment