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

kilianvampirexxo	1770329029 usingggg! Report Comment
Callsign_C0dy	1770258864 using Report Comment
Mat	1770228482 trying it out! Report Comment
cleme!🩸	1769895246 using Report Comment
cleme!🩸	1769895244 using Report Comment
thebeexxx	1769599523 Using Report Comment
𓏲ּ𝄢 izza ⚢	1769520518 using ! Report Comment
Rice♡	1769462707 Using Report Comment
Thursty	1769356838 using! Report Comment
famous monster	1769324839 using Report Comment
m!a$pace	1769061859 using Report Comment
wafwaf	1769014359 usinggg hehe Report Comment
Mail Jeevas DX	1768844905 USINGGG!! Report Comment
cokemilk	1768737375 usssingggg Report Comment
Carlo	1768551792 using Report Comment
HYPERN0VA	1768520021 uuusiinggg Report Comment
vega	1768377628 using Report Comment
Kat	1768189452 usingggg Report Comment
camz <3	1768172070 using Report Comment
✌︎ keisha ᓚᘏᗢ	1768110429 using! :D valentine, ur carrying my profile ty sm harhar Report Comment