floffy's profile picture

Published by

published
updated

Category: Web, HTML, Tech

floating images on profile

code for on the left


footer:before{

bottom: 3%;

font-size:0;

right: 80%;

position:fixed;

pointer-events: none;


content:url(imagelink);

}

code for on the right


footer:after{

bottom: 30%;

font-size:0;

left: 78%;

position:fixed;

pointer-events: none;

content:url(imagelink);

}


and if u want to move it around put this the line after content, or you can adjust the values for bottom or left, or change them to top or right.


transform: translate(0px, 0px);


and this is to horizontally flip the image


-webkit-transform: scaleX(-1);

transform: scaleX(-1);

other transformations include scale(0.5), rotate(90deg), and some others these r just some examples. 

you can change 'footer' to any other section name. also TLDR if you aren't entirely familiar with css, you can only use one transform function and only one picture per section(footer, e.t.c)


68 Kudos

Comments

Displaying 9 of 9 comments ( View all | Add Comment )

Sip O' Poison

Sip O' Poison's profile picture

Is there any way to make the image float along with my floating profile?


Report Comment

OMORI

OMORI's profile picture

Thx


Report Comment

angel :3 (dead :()

angel :3 (dead :()'s profile picture

TYY!!


Report Comment

VINNY

VINNY's profile picture

TYSM


Report Comment

XDCER3AL

XDCER3AL's profile picture

thx you saved me


Report Comment

cherry(autoplay 🎶)

cherry(autoplay 🎶)'s profile picture

used! thank you!


Report Comment

Bravopotato

Bravopotato's profile picture

Ily sm rn I might just find a way to save this post loll <3


Report Comment



<3 :3

by floffy; ; Report

hxlloketty

hxlloketty's profile picture

thank you sooo much I've been trying to figure this out FOREVER LOL


Report Comment

luka :3

luka :3's profile picture

yay i've been looking for this code!!!


Report Comment



glad i could help :3

by floffy; ; Report