skip to Main Content

I think the best example of what I am thinking of would be like you click on an image and it changes the filter and that filter stays even if you’re not holding down on the image.

At first I thought maybe I could use the :active pseudo-class on an image to make it grayscale upon click as a test however it didn’t work. Then I tried making the image a link and doing

a:visited {
    filter:  grayscale(100%);
}

however, it did not work.

2

Answers


  1. You can’t do that by pure CSS, but you can use a hidden checkbox to manipulate the image.

    input.hidden {
      display: none;
    }
    
    label > img {
      transition: filter 300ms;
      cursor: pointer;
    }
    
    input[type="checkbox"]:checked ~ label > img {
      filter: grayscale(1);
    }
    <div>
      <input id="doggy" class="hidden" type="checkbox">
      <label for="doggy"><img src="https://picsum.photos/id/237/200/200"></label>
    </div>
    Login or Signup to reply.
  2. Play with transition and you can simulate it:

    img {
      transition: 0s 9999s filter; /* a big delay on mouseout so it take a lot of time to change */
      cursor: pointer;
    }
    
    img:active {
      transition: 0s filter; /* instant change on click */
      filter: grayscale(1);
    }
    <img src="https://picsum.photos/id/125/200/200">
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search