[WIP] Welcome to the second post in our CSS tutorial series! Today, we'll dive into CSS filters, a feature that allows you to manipulate the appearance of elements on your webpage. We'll cover filters like 'hue-rotate', 'grayscale', and 'blur'. Let's get started!
CSS filters are like photo filters for your webpage elements. They let you adjust colors, blur images, and create interesting effects without having to modify the actual image or content. Instead, you can apply these filters directly within your CSS code. These are most commonly used in your king's image, the lioden logo on desktop and cave images!

Hue-rotate

The hue-rotate filter allows you to shift the hue of an element's colors. It takes an angle value as a parameter, which represents the degrees of rotation on the color wheel.
If you did not understand anything just said; fear not! I'll simplify it.

Imagine you have the color green; a positive turn, for example 90 degrees, will turn it warm. In this case, we'd probably be looking at an orange.
Now, returning back to your green color, we'll make it turn negatively. This would be -90 degrees, making the green a colder color. Now we have a minty blue! Don't quote me on that though, it's only theoretical.

.image {
filter: hue-rotate(90deg);
}

Grayscale

The grayscale filter converts the colors of an element to shades of gray. It takes a value between 0 and 1, where 0 represents no grayscale effect and 1 represents full grayscale. It really IS as simple as that. If you want to use this filter, here's an example!

.image {
filter: grayscale(0.5);
}

Blur

The blur filter applies a blur effect to an element. It takes a length value as a parameter, specifying the amount of blur to apply. Artists tend to be familiar with a blur effect already; for those who aren't, think of unfocusing your eyes. Everything becomes unclear. This effect can be used if you want to have a transition upon clicking something. Imagine your image is blurry at first, but you'd have to click to reveal!

.background {
filter: blur(5px);
}

Animations/hover transitions

For this example, I'll be using the lion image used to navigate to your king's page!

#lion_image {
filter: grayscale(30%);
transition: filter 3s; /* Add a smooth transition for the filter */
}
#lion_image:hover {
filter:rgrayscale(0%); /* Remove the filter on hover */
}

There ARE a bunch of filters that haven't been mentioned or explained here. Brightness, Sepia, Contrast, invert. Most of these tend to work the same as grayscale, with 0 being none and 1 being absolute! You could also use percentages.
P.S. Filters do not work on every browser. Be sure to check which ones do on Click me!. That site also delves into some filters I haven't explained!