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

Tripleye_4	1746557849 using!! Report Comment
♡ ~LollyPoPCrUsh~ ♡	1746244851 USING Report Comment
ՈNⱯ	1745585579 Using with slight tweaks Report Comment
#1 Rin Kisser	1744752053 using! Report Comment
Marielle(∩^o^)⊃━☆	1742277563 usingggg Report Comment
bruhich	1741546665 using Report Comment
Melodyx_x	1740091818 usinggg Report Comment
Eoyx Angel >__<	1738680715 Using >w< Report Comment
JeaN	1737787456 usinggg!! Report Comment
CHELZZZ ₊˚⊹ 🦴	1735817917 USING!! Report Comment
#1 𝘼𝙉𝙔𝘼(𝙈𝙊𝙐𝙏𝙃𝙒𝘼𝙎𝙃𝙄𝙉𝙂) 𝘿𝙀𝙁𝙀𝙉𝘿𝙀𝙍	1735704701 usingg Report Comment
unicornwaste	1735007810 haii :3 ty for using my layout guys!! also im accepting all frends requests!! plaz add me =PPPP!!!! Report Comment
bear 🪱	1735006153 using !! Report Comment
..Gigi..	1734802516 Using!! <3 Report Comment
Vaughn	1734583088 Using, thanks! Report Comment
✦˚Ccali٭⊹!	1733202522 using Report Comment
Furina ≺☉)͜͡˒ ⋊	1732978852 using! :D Report Comment
alex	1731006253 usinshhsuue :D Report Comment
mr.imakms	1730291952 usingggg Report Comment