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 113 comments ( View all | Add 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
ナス科 // solanum dulcamara	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
Wolf	1749402646 using Report Comment
𓆩♡𓆪 ⋆ℌ𝔬𝔪𝔢𝔭𝔞𝔰𝔱𝔞⋆ 𓆩♡𓆪	1749197670 using Report Comment
Blitzenheimer	1748702319 using! :D Report Comment
Mr.GrimReaper	1748374926 Using Report Comment
Tripleye_4	1746557849 using!! Report Comment
♡ ~LollyPoPCrUsh~ ♡	1746244851 USING Report Comment
⋆｡˚꒰ঌ lils ໒꒱˚｡⋆	1744752053 using! Report Comment
Marielle(∩^o^)⊃━☆	1742277563 usingggg Report Comment
bruhich	1741546665 using Report Comment