Melupii's profile picture

Published by

published
updated

Category: Web, HTML, Tech

Unblur on Hover effect (Friendspace icons/pfps) [Code]

Hello !!! ( ° ∀ ° )ノ゙


I wanted to make the icons/pfps in my friendspace blurred so that when you hovered your cursor over one it would then unblur ! 


I know I've seen people with this effect before but for some reason I could not find the layout for it,, I could only find "Blur on hover" which is not at all what I wanted ( ; ω ; )


So even though I don't understand code at all,, I got to work. And finally after a good few hours I figured it out !!


The code looks so simple but I kept running into an issue with the "Ease-in-out" part,, I figured out the main part of the code pretty quickly (Blur, unblur) but it would happen so fast I didn't like it at all,, I wanted the animation to be smoother ! (ಥ﹏ಥ)


I eventually finally figured it out (Just now) and I'm so happy with it ^^


Since you can no longer share layouts anymore,, I figured I'd share it in Blogs instead !


Please let me know if you use it or at least leave a kudos ! 💗 I tested it on both this account and an alt so it should work but I'm not really sure how other layouts will affect it


You can change the blur if you want by messing around with that first number,, bigger numbers for heavier blurring and smaller for light blurring :33



Hope this helps someone !!! ( ´ ∀ `)ノ~ ♡




<!-- (c) Layout created by melupii (https://spacehey.com/melupii) -->

<style>
.profile .friends .person img:not(.icon) {
  filter: blur(3px);

  &:hover {
    filter: blur(0px)} transition: all 500ms ease-in-out}
  }
</style>



Copy and paste the above into ABOUT ME section !!!



23 Kudos

Comments

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

Melupii

Melupii's profile picture
Pinned

Btw does anyone know why you can no longer upload layouts in the layout space ? This layout is how I found out that the upload feature has been shut down for a whole now ( ; ω ; )


Report Comment



it's because of the g0re thingy that happened honestly I'm not sure if it'll ever go back up TYFUAFYTUAFTY7AYTUFA

by Parsley Rowan Fey; ; Report

Ah that makes sense,, I hope it's back up eventually,, It'd be nice to have more recent layouts in the layout page 3

by Melupii; ; Report

YEAHAHHH

by Parsley Rowan Fey; ; Report

its back now i think? i was surprised when ppl were talking abt this cuz i never noticed it was gone

by Fag4shadow01; ; Report

Ah that's a separate thing I'm talking about

You can still access the layouts uploaded to the site,, you just can't upload new ones. If you look into the recent layouts, the very last layout was uploaded 4 months ago :'). If you try to upload a new one it will say "Posing layouts is temporarily unavailable. Check back soon." (Hehe they wrote Posting wrong)

I was very disappointed to find this out

by Melupii; ; Report

Kawaii~Jinn

Kawaii~Jinn's profile picture

using !!


Report Comment

Gabriel

Gabriel's profile picture

THANK YOUU


Report Comment

♱ wake !

♱ wake !'s profile picture

using!! it's really cool!!


Report Comment

Insomniac ⁠˘⁠ ⁠o⁠ ⁠˘ 

Insomniac ⁠˘⁠ ⁠o⁠ ⁠˘ 's profile picture

YESSS I WAS LITERALLY LOOKING FOR THAT


Report Comment

B4RR3TT / R3D

B4RR3TT / R3D's profile picture

tysmmm!! i was trying to find one of these for a while now.. ヾ(≧▽≦*)


Report Comment

Nighty.love

Nighty.love 's profile picture

Using tysm<333


Report Comment

Parsley Rowan Fey

Parsley Rowan Fey's profile picture

USINGGGGGG TYSM HHFFSJHGCSFJHCAFFYUFFYUAUTYFAFUTAIUFFUGI


Report Comment



TY !!!,, SO HAPPY TO HAVE SOMEONE ELSE USE IT ALSO ヽ(o^ ^o)ノ

by Melupii; ; Report

NPPP :333 TYSM FOR POSTING THIS I WAS TRYING TO FIND THE LAYKUT FOR THIS FOR SO LONG HJGSHJGSHMGWHJGWJHG

by Parsley Rowan Fey; ; Report