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