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

drowsy_doodler	1792102944 usingg Report Comment
Bluefeather89	1791955524 "Using" Does maxs photo show up in the hover Polaroid??? It has the Polaroid photo border with the name customized but the photo is blank or missing??? Report Comment You need to change your profile picture from the homescreen click "add/edit photo" by Valentine; 1792000338; Report
𝑴𝒊𝒊𝒖 !	1791845566 usingg Report Comment
♡⏝　⸝⸝ yvonne ຼ ͜𓐇˚ִִ𓈒	1790654985 using Report Comment
† Shirvx ♪	1789950869 ussing Report Comment
beppermint	1789521412 using!!! :oD Report Comment
saf	1789416680 usinggg Report Comment
(✿◡‿◡) yasia	1789409329 using Report Comment
Valushcax.x.KOzxx	1789246558 usingg ;P Report Comment
unicorni_oo3neko	1787691739 Usingg Report Comment
icarly	1787647210 luvvvvuhh Report Comment
Ellie!!	1787350010 Usingg, this is so cool. Report Comment
Hino	1786923423 uisnggg Report Comment
Raven	1786828384 Thank you ! <3 Report Comment
Sharry	1786474234 Using Report Comment
𝗠𝘪𝘭𝘭𝘪𝘦 ˘ ᰔᩚ	1786441912 Using Report Comment
†Atzrl† undead	1786429220 usingggggg Report Comment
† Shirvx ♪	1786279546 Usingg Report Comment
cupidkisses	1786199197 Usinggg. Report Comment
abeljustwokeup	1786173271 using thx!! Report Comment