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

~y4seino	1783506949 usingg! ^_^ Report Comment
velenoriaa	1781744922 wii using!:3 Report Comment
volta	1778930464 using!! Report Comment
vaLe!!	1776790869 thankesss uziniing!! Report Comment
cornbread	1775643107 Using Report Comment
༒★Aภa★༒	1774308684 using!! Report Comment
Tripleye_4	1772158157 usingg Report Comment
⚘𝒑𝒆𝒂𝒓𝒍𝒚_𝒗𝒆𝒓𝒔𝒆⚘	1769769562 usinggg!! Report Comment
Clericó	1768507887 usinggg Report Comment
clementine !!	1768254441 using!! Report Comment
𝗦𝘁𝘂𝗻𝗼𝗿𝗶🎭	1767851986 Using! Report Comment
Ele	1767392640 USING Report Comment
QUINN :P	1766334999 USING!! Report Comment
dowy	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
aiakontheweb	1763022860 I lost this, thank you :D Report Comment