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

idwc0w0	1715284475 using Report Comment
kyuru 〰	1715166599 USIIING TY!1 :D Report Comment
Ｃｒ０ｗｗｙｎｋ１ｋ０	1715007114 Using .0. Report Comment
Philia	1714781842 usinngg Report Comment
whipstickagostop	1714579460 TYSMMM !! USING :3 Report Comment
ASH / FELIX ⚣	1714231211 YEAHH I WAS LOOKING FOR THIS TY!!! Report Comment
Allurix	1713555342 awesome Report Comment
Fo0xxyz	1712696935 USING Report Comment
💫 🌟 🪩 synthian 🪩 🌟💫	1711142405 thank you Report Comment
ELEVATORZYZTEM	1710062343 Uzing! Report Comment
Masã	1709961972 USINGGG Report Comment
EMILY DA ZTRANGE	1708597172 USING111!!1 Report Comment
Zombie_Cow	1708396807 usinggg Report Comment
Curious!! XD	1707839077 using Report Comment
postcrucifixxion	1706371396 using!! Report Comment
z0mbieg1rll00	1706269536 usingg Report Comment
🎀𝓛𝓤𝓒𝓘𝓕𝓔𝓡🎀	1706128007 UZ1NGGGGG!!!!!!!!!!!! :D Report Comment
𓏲 ๋࣭⌑ ࣪˖┊Nico	1706103534 USINGG Report Comment
Rei	1705822277 usaim Report Comment
fluffynnz	1705798935 usiiing Report Comment