Image shake + hoverrainbow

Tags: hover, rainbow, effect, ccs, shake, gif

Description:

Hii! I know this is not original, but since I cant find it ANYWHERE and i know people have been looking for something like this, here is the code!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Sickly Sweet Sarah (https://layouts.spacehey.com/layout?id=88878) -->

<style>
@keyframes hoverrainbow {
  from {
    filter: saturate(300%) hue-rotate(0deg);
  }
  to {
    filter: saturate(300%) hue-rotate(360deg);
  }
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes hoverEffects {
  from {
    filter: saturate(150%) hue-rotate(0deg);
    transform: translate(1px, 1px) rotate(0deg);
  }
  to {
    filter: saturate(150%) hue-rotate(360deg);
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

main img:hover {
  animation: 1s hoverrainbow, 0.5s shake, 1s hoverEffects;
  animation-iteration-count: infinite;
}
</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 121 comments ( View all | Add Comment )

⚘𝒑𝒆𝒂𝒓𝒍𝒚_𝒗𝒆𝒓𝒔𝒆⚘	1769769562 usinggg!! Report Comment
deadn0ise	1768507887 usinggg Report Comment
magnolia!! ^_^	1768254441 using!! Report Comment
𝗦𝘁𝘂𝗻𝗼𝗿𝗶🎭	1767851986 Using! Report Comment
.ele.	1767392640 USING Report Comment
QUINN :P	1766334999 USING!! Report Comment
crroppi	1765880629 using Report Comment
heu ::::::	1764186956 using!!!!!!thankq!!!! Report Comment
~faye~	1763622183 using~ Report Comment
☆D3arM4riaC0untMEin ☆	1763516728 using! Report Comment
꒰ঌ pwety ໒꒱//🍨 ⊹ ࣪ ˖‧	1763315983 using!! Report Comment
Lucifer	1763250724 using Report Comment
aiak_ontheweb	1763022860 I lost this, thank you :D Report Comment
nick.starring	1761526454 Using! Report Comment
deliii (ˊᗜˋ*)	1760832769 using Report Comment
𝓕𝓻𝓮𝓪𝓴𝔂ASAHI/ASH!!! ☆彡 #1 Tsukasa Fan (trust)	1760165682 using!!!! Report Comment
𖤐 MEL0DR4M4T1C!!!!!! 𖤐	1757718352 usingg :3 Report Comment
vnBanshee	1757170108 Using (!) Report Comment
iirocknroll	1756695346 usinggg >.< Report Comment
Dash	1752179925 using Report Comment