Unicorn magic for images and text (when hovered)

Tags: mlp, my little pony

Description:

Change "hotpink", "pink" and degrees of the "hue-rotate" to change the color.
10deg - yellow
50deg - green
150deg - cyan
170deg - blue
220deg - purple
280deg - pink
320deg - red
340deg - orange
Rainbow - scroll down below the code and copy everything under "-- Rainbow --"

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by h0rsev1rus (https://layouts.spacehey.com/layout?id=40683) -->

<style>

/* text */
a:hover:not(#comments a){
  color: white !important; 
  background-color: hotpink; /* change hotpink */
  text-decoration-color: pink !important; /* color of wave under text, change pink */
  text-decoration-style: wavy !important; 
  transition: all ease 1s;
}

/* images */
img:hover{
  filter: sepia(100%) 
  hue-rotate(290deg) /* change 290 */
  contrast(70%) saturate(300%)
  drop-shadow(0px 0px 9px hotpink); /* change hotpink */
  animation: magic 4s;
  animation-iteration-count: infinite;
}
@keyframes magic {
  0% {transform: translate(0px, -6px) rotate(-2deg);}
  50% {transform: translate(0px, 6px) rotate(2deg);}
  100% {transform: translate(0px, -6px) rotate(-2deg);}
}
</style>

<!-- Rainbow -->

<style>

/* text */
a:hover{
  color: white !important; 
  background-image: url(https://i.postimg.cc/yxQKmZJL/ranbowgrad.gif);
  text-decoration-color: white !important;
  text-decoration-style: wavy !important; 
  transition: all ease 1s;
}

/* images */
img:hover{
  animation: rainbow 14s;
  animation-iteration-count: infinite;
}
@keyframes rainbow {
  0% {transform: translate(0px, 6px) rotate(2deg); filter: sepia(100%) hue-rotate(340deg) contrast(70%) saturate(300%) drop-shadow(0px 0px 9px orange)}
  12% {transform: translate(0px, -6px) rotate(-2deg); filter: sepia(100%) hue-rotate(320deg) contrast(70%) saturate(300%) drop-shadow(0px 0px 9px red)}
  24% {transform: translate(0px, 6px) rotate(2deg); filter: sepia(100%) hue-rotate(290deg) contrast(70%) saturate(300%) drop-shadow(0px 0px 9px hotpink)}
  36% {transform: translate(0px, -6px) rotate(-2deg); filter: sepia(100%) hue-rotate(220deg) contrast(70%) saturate(300%) drop-shadow(0px 0px 9px purple)}
  48% {transform: translate(0px, 6px) rotate(2deg); filter: sepia(100%) hue-rotate(170deg) contrast(70%) saturate(300%) drop-shadow(0px 0px 9px blue)}
  60% {transform: translate(0px, -6px) rotate(-2deg); filter: sepia(100%) hue-rotate(150deg) contrast(70%) saturate(300%) drop-shadow(0px 0px 9px cyan)}
  72% {transform: translate(0px, 6px) rotate(2deg); filter: sepia(100%) hue-rotate(50deg) contrast(70%) saturate(300%) drop-shadow(0px 0px 9px green)}
  87%  {transform: translate(0px, -6px) rotate(-2deg); filter: sepia(100%) hue-rotate(10deg) contrast(70%) saturate(300%) drop-shadow(0px 0px 9px yellow)}
  100% {transform: translate(0px, 6px) rotate(2deg); filter: sepia(100%) hue-rotate(-20deg) contrast(70%) saturate(300%) drop-shadow(0px 0px 9px orange)}
}
</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 11 of 11 comments ( View all | Add Comment )

mxkenzx	1743033248 USIN Report Comment
mak⋆. ࿐࿔	1739709336 using! Report Comment
𖥔 𝄄 𓊆ꪖꪶꫀ᥊𓊇 💋 𔒧	1735552377 Using!! o(^▽^)o Report Comment
WIP !!	1733633918 using :3 Report Comment
Arishia~<3	1732872743 using! Report Comment
achilles	1732474375 ussingnggng Report Comment
﹒ 𝓞 𓏵 ⟢	1721898004 using Report Comment
bunbun!!	1718511967 usin!! Report Comment
_tigerzz🚦	1715746951 using!!! Report Comment
Nana	1711751270 using Report Comment
seba	1708362631 using thx!!! :33 Report Comment