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 sah (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 84 comments ( View all | Add Comment )

alex	1731006253 usinshhsuue :D Report Comment
mr.imakms	1730291952 usingggg Report Comment
Kaikoreii	1730221367 Using tysm:3 Report Comment
skylarXD	1730050381 USING!! X3 Report Comment
Cr1ms0nCC	1727014741 using! Report Comment
kittenpawz_	1726787118 usingg Report Comment
Samuel	1726045460 using Report Comment
ADAMM X33	1724787231 using :33 Report Comment
(꒷꒦꒷) Sugar ᓚᘏᗢ !¡ ꒰🍭꒱༘	1724535494 using Report Comment
🍦 ⋆ 🎀 𝒮𝓅00𝓀𝓎 🎀 ⋆ 🍉	1724535283 using Report Comment
! MarZzz	1722562628 Usingg :3!!! Report Comment
moviesandradford	1722269698 using! Report Comment
Nara	1722052315 usinggg Report Comment
FIZZLE!!!	1722043648 USING X3 Report Comment
Yusjk1i	1721555204 Using! Report Comment
bug (#1 sainz fan)	1720630374 using!! :p Report Comment
Nexisia	1720401367 usinggg Report Comment
cool bucket ^_^	1720343463 Using :D Report Comment
Ree <3	1720272344 using!! Report Comment
Kite Atomsku	1720236324 using! thank you! Report Comment