🎃 Elad's Halloween Profile Picture Frame 🎃

An interactive jack-o'-lantern pfp frame!
Code

<style>
[data-skin-part="photo"]{
	display:grid;
	position:relative;
	overflow:visible;
	isolation:isolate;
	aspect-ratio:1 / 1;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder{
	grid-column:1;
	grid-row:1;
	width:47%;
	height:47%;
	min-width:0;
	max-width:none;
	aspect-ratio:1 / 1;
	object-fit:cover;
	object-position:center;
	border-radius:50%;
	border:none;
	box-shadow:none;
	align-self:center;
	justify-self:center;
	transform:translate(-2.5%, 11%);
	z-index:1;
}
[data-skin-part="photo"]::before,
[data-skin-part="photo"]::after{
	content:"";
	grid-column:1;
	grid-row:1;
	width:100%;
	height:100%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	pointer-events:none;
	z-index:2;
	transition:opacity 0.35s ease;
}
[data-skin-part="photo"]::after{
	background-image:url("https://i.ibb.co/BHYXgSc8/Untitled55-20261102213446.png");
	opacity:1;
}
[data-skin-part="photo"]::before{
	background-image:url("https://i.ibb.co/PzC4sz9B/Untitled55-20261102213442.png");
	opacity:0;
}
[data-skin-part="photo"]:hover::after{
	opacity:0;
}
[data-skin-part="photo"]:hover::before{
	opacity:1;
}
</style>
Comments

No comments yet.