I am very new to this and am trying to customize my profile on a website that supports html/css coding. I have figured out how to grayscale my images until hover, but I am wondering if there is a way to greyscale the rest of the page on hover so the image is the only colored element.

Everything I have tried has been quite literally just throwing stuff at the wall and seeing if it sticks as I don’t know where to even start with something like this, so I don’t believe adding my failed attempts will be of any assistance. Below is my current coding for the images, they all fall under the same css ID.

* BC IMAGES *
.css-rioh04{
  filter: Grayscale(100%);
}

.css-rioh04:hover {
  transform: scale(1.1);
  filter: drop-shadow(2px 3px 3px  #935d5d) !important;
  filter: Grayscale(0%);
  z-index: 2;
}

My apologies if this post does not supply enough information, English is not my first language and I admittedly have no idea what I am doing.