<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.