make image more saturated when hovered over

Tags:

Description:

so i was trying to make it so when i hover over images it shakes and turns rainbow but in the process i made it so its more saturated? if anyone can help with what i was originally gonna do please comment under this post anything that would help but for now just have this for if you wanna saturate your images

Preview:

Code:

<!-- (c) Layout created by samuel (https://layouts.spacehey.com/layout?id=83629) --> <style> img:hover { /* Start the shake animation and make the animation last for 0.5 seconds */ animation: shake 0.5s; /* When the animation is finished, start again */ animation-iteration-count: infinite; } @keyframes shake, hoverrainbow { 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); } from{ filter:saturate(300%) hue-rotate(0deg); } to{ filter:saturate(300%) hue-rotate(360deg); } } main img:hover { filter:saturate(300%); animation: 1s hoverrainbow infinite linear; } </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.