<label class="dim" title="Click to reveal">
  <input type="checkbox">
  <svg class="icon" width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M15.018 12.975c-4.367-1.203-10.525-1.147-13.692-.613-.383.064-.443 1.823-.103 1.884.626.253.893.885.893.885s.187.561.73 2.841c.543 2.28 1.838 2.554 1.838 2.554s1.584.392 3.411.392c1.828 0 2.92-.083 4.091-.669 1.17-.585 1.682-2.216 1.682-2.216s.59-1.404.996-2.73c.127-.416 2.064-.416 2.191 0 .406 1.326.996 2.73.996 2.73s.512 1.63 1.682 2.216c1.17.586 2.263.669 4.09.669 1.828 0 3.412-.392 3.412-.392s1.295-.274 1.838-2.554c.543-2.28.73-2.84.73-2.84s.267-.633.893-.886c.34-.061.28-1.82-.103-1.884-3.167-.534-9.325-.59-13.693.613-.296.068-1.585.068-1.882 0z"/></svg>
  <img src="https://res.cloudinary.com/justrhysism/image/upload/f_auto,q_auto,w_600,dpr_auto/posts/twitter-light-mode-justrhysism-small-cap.png" />
</label>

<p>Click to toggle image dimmer.</p>
.dim {
  position: relative;
  display: inline-block;
  
  img {
    display: inline-block;
    filter: brightness(40%) grayscale(50%);
    transition: filter 0.1s ease;
  }
      
  input {
    display: none;
  }
  
  .icon {
    position: absolute;
    top: 10%;
    right: 10%;
    z-index: 1;
    
    border: 2px solid white;
    border-radius: 100%;
    padding: 3px;
    
    fill: white;
    opacity: 0.9;
    transition: opacity 0.1s ease;
  }
  
  input:checked {
    ~ .icon {
      opacity: 0.3;
    }
    
    ~ img {
      filter: brightness(100%) grayscale(0%);
    }
  }
}

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

img {
  max-width: 100%;
}

.dim + p {
  margin-top: -2em;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.