<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" />
<p>Click to toggle image dimmer.</p>
.dimmer-switch {
position: relative;
display: inline-block;
cursor: pointer;
img {
display: inline-block;
filter: brightness(40%) grayscale(50%);
transition: filter 0.1s ease;
}
.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;
}
&.is-on {
.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%;
}
.dimmer-switch + p {
margin-top: -2rem;
}
View Compiled
const sunglasses =
'<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>';
const TITLE_TAP_TOGGLE = 'Tap to toggle dimmer';
const TITLE_SPACE_TOGGLE = 'Tap or press spacebar to toggle dimmer';
function addDimmerSwitch(image) {
// Wrap Image
const wrapper = document.createElement('span');
wrapper.classList.add('dimmer-switch');
wrapper.title = TITLE_TAP_TOGGLE;
wrapper.tabIndex = 0;
image.insertAdjacentElement('beforebegin', wrapper);
image.remove();
wrapper.appendChild(image);
// Add SVG
wrapper.insertAdjacentHTML('afterbegin', sunglasses);
// Toggles
const toggleTitle = space => wrapper.title = space ? TITLE_SPACE_TOGGLE : TITLE_TAP_TOGGLE;
const toggleDimmer = () => wrapper.classList.toggle('is-on');
// Handlers
const keyHandler = event => {
event.preventDefault();
// Not 'space'
if (event.which !== 32) return;
toggleDimmer();
}
const focusInHandler = () => toggleTitle(true);
const focusOutHandler = () => toggleTitle(false);
// Bind Events
wrapper.addEventListener('click', toggleDimmer);
wrapper.addEventListener('keydown', keyHandler);
wrapper.addEventListener('focusin', focusInHandler);
wrapper.addEventListener('focusout', focusOutHandler);
}
const images = document.querySelectorAll('img');
images.forEach(addDimmerSwitch);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.