<img style="filter: grayscale(var(--value, 100%));" data-type="%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
<img style="filter: sepia(var(--value, 100%)" data-type="%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
<img style="filter: saturate(var(--value, 5))" data-type="float" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
<img style="filter: hue-rotate(var(--value, 360deg))" data-type="angle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
<img style="filter: invert(var(--value, 100%))" data-type="%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
<img style="filter: opacity(var(--value, 100%))" data-type="%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
<img style="filter: brightness(var(--value, 5))" data-type="float" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
<img style="filter: contrast(var(--value, 5))" data-type="float" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
<img style="filter: blur(var(--value, 1rem))" data-type="px" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele">
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 1rem;
padding: 1rem;
margin: 0;
background: black;
}
.card {
position: relative;
padding: 1rem;
background: #eee;
border-radius: 8px;
}
input {
position: absolute;
top: 20px;
left: 20px;
z-index: 1;
}
img {
max-width: 100%;
border-radius: 4px;
}
function wrap(el) {
const wrapper = document.createElement("div");
wrapper.classList.add("card");
let max;
if (el.dataset.type === "%") {
max = 100;
} else if (el.dataset.type === "angle") {
max = 360;
} else if (el.dataset.type === "px") {
max = 20;
} else {
max = 4;
}
wrapper.insertAdjacentHTML(
"beforeEnd",
`<input type='range' min="0" max="${max}" value="100">`
);
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
wrapper.insertAdjacentHTML(
"beforeEnd",
`<pre class='output'>{
${el.getAttribute("style")}
}</pre>`
);
return wrapper;
}
const imgs = document.querySelectorAll("img");
imgs.forEach((img) => {
const wrapper = wrap(img);
let range = wrapper.querySelector("input");
range.addEventListener("input", (e) => {
let newValue;
if (img.dataset.type === "%") {
newValue = e.target.value + "%";
} else if (img.dataset.type === "angle") {
newValue = e.target.value + "deg";
} else if (img.dataset.type === "px") {
newValue = e.target.value + "px";
} else {
newValue = e.target.value;
}
img.style.setProperty("--value", newValue);
const output = wrapper.querySelector(".output");
output.innerHTML = `{
${img.getAttribute("style")}
}`;
});
});
This Pen doesn't use any external CSS resources.