User:JPxG/sandboxcss/sand.css

.img-wrap {
  position: relative;
  image-rendering: pixelated; /* CSS property for pixelation */
}
.overlay {
  position: absolute; 
  left: 0;
  top: 0;
  image-rendering: pixelated; /* CSS property for pixelation */
}
.rot030 {
  filter: hue-rotate(30deg);
}
.rot060 {
  filter: hue-rotate(60deg);
}
.rot090 {
  filter: hue-rotate(90deg);
}
.rot120 {
  filter: hue-rotate(120deg);
}
.rot150 {
  filter: hue-rotate(150deg);
}
.rot180 {
  filter: hue-rotate(180deg);
}
.rot210 {
  filter: hue-rotate(210deg);
}
.rot240 {
  filter: hue-rotate(240deg);
}
.rot270 {
  filter: hue-rotate(270deg);
}
.rot300 {
  filter: hue-rotate(300deg);
}
.rot330 {
  filter: hue-rotate(330deg);
}
.rot360 {
  filter: hue-rotate(360deg);
}


.rot030none {
  filter: hue-rotate(30deg);
  display: none;
}
.rot060none {
  filter: hue-rotate(60deg);
  display: none;
}
.rot090none {
  filter: hue-rotate(90deg);
  display: none;
}
.rot120none {
  filter: hue-rotate(120deg);
  display: none;
}
.rot150none {
  filter: hue-rotate(150deg);
  display: none;
}
.rot180none {
  filter: hue-rotate(180deg);
  display: none;
}
.rot210none {
  filter: hue-rotate(210deg);
  display: none;
}
.rot240none {
  filter: hue-rotate(240deg);
  display: none;
}
.rot270none {
  filter: hue-rotate(270deg);
  display: none;
}
.rot300none {
  filter: hue-rotate(300deg);
  display: none;
}
.rot330none {
  filter: hue-rotate(330deg);
  display: none;
}
.rot360none {
  filter: hue-rotate(360deg);
  display: none;
}

.tone1 {
	filter: sepia(100%) hue-rotate(-15.0deg) saturate(1.30) brightness(0.20);
}
.tone2 {
	filter: sepia(100%) hue-rotate(-18.0deg) saturate(3.00) brightness(0.25);
}
.tone3 {
	filter: sepia(100%) hue-rotate(-24.0deg) saturate(2.70) brightness(0.50);
}
.tone4 {
	filter: sepia(100%) hue-rotate(-15.0deg) saturate(2.00) brightness(0.75);
}
.tone5 {
	filter: sepia(100%) hue-rotate(-0.00deg) saturate(1.00) brightness(1.05);
}
.tone6 {
	filter: sepia(100%) hue-rotate(-15.0deg) saturate(1.25) brightness(1.20);
}
.tone7 {
	filter: sepia(100%) hue-rotate(-34.0deg) saturate(1.90) brightness(1.10);
}
.tone8 {
	filter: sepia(100%) hue-rotate(-30.0deg) saturate(1.10) brightness(1.20);
}

.blk {
	filter: sepia(100%) hue-rotate(-15.0deg) saturate(0.00) brightness(0.20);
}

.pnk {
	filter: hue-rotate(322deg) saturate(1.8) brightness(1.2);
}

.sep {
  filter: sepia(100%);
}

.grs {
  filter: grayscale(100%);
}

.des {
  filter: saturate(0%);
}