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:

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.