Witam w sekcji o filtrach CSS!
Tutaj przykłady na zdjęciu kota, wystarczy najechać!
blur(5px)(0-inf)
brightness(0.4)(0-inf)
contrast(300%)(0%-inf%)
grayscale(100%)(0%-100%)
sepia(100%)(0%-100%)
Same efekty można nakładać używając:filter: efekt(wartość) ;
Żeby efekt był nakładany przy najechaniu, trzeba użyć:
element:hover{}
Gdzie element to część html na którą trzeba najechać, aby styl się aktywował
Jeśli chcemy aby przejście między stanami było łagodne należy użyć:
transition: styl czas;
Gdzie styl to styl który ma łagodnie przechodzić, a czas to długość przejścia
oto wycinek kodu, aby łatwiej zrozumieć:
#sepia:hover{
filter:sepia(100%) ;
transition: filter 1s;
}