<img class="dim" src="https://res.cloudinary.com/justrhysism/image/upload/f_auto,q_auto,w_600,dpr_auto/posts/twitter-light-mode-justrhysism-small-cap.png" tabindex="0" />
<p>Focus or click + hold to toggle image dimmer.</p>

.dim {
  filter: brightness(40%) grayscale(50%);
  
  /* Transition to "off" (dim) */
  transition-property: filter;
  transition-duration: 0.5s;
  transition-delay: 0.5s; /* Delay slightly */
  transition-timing-function: ease-out;
      
  &:focus,
  &:active {
    filter: brightness(100%) grayscale(0%);

    /* Transition to "on" (bright) */
    transition-duration: 0.1s;
    transition-delay: 0.01s;
    transition-timing-function: ease;
  }
}

body {
  background: hsl(220, 20%, 16%);
  color: white;
  text-align: center;
}

img + p {
  margin-top: -2em;
}