Dynamic Image Colorizing with <input type="color">

dynamic-image-colorizing-with-input-type-color.markdown

Dynamic Image Colorizing with

Removes chrome from color input swatch and overlays over an image, using blend modes to colorize. Voila! Color changing without JS.

Chrome and Firefox only right now.

A Pen by Osman on CodePen.

License.

index.html

<!-- CLICK TO CHANGE COLOR -->
<input type="color" value="#0000ff">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg">
<!-- Image Credit -->
<a href="https://www.flickr.com/photos/betabit/9284591662/" target="_blank">Photo by Jackson Faddis 🔗</a>

style.css

html, body { height: 100%; }
body { margin: 0; }

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

input { 
    /* removes default styling from input color element */
    padding: 0;
    border: none; 
    /* makes input (color swatch) 100% size of container */
    position: absolute;
    width: 100%; 
    height: 100%;
    /* mix blend mode makes the color of the swatch alter the image behind it. */
    mix-blend-mode: hue; /* try screen, multiply or other blend modes for different effects */
    cursor: pointer;
}

/* removes default styling from input color element */
::-webkit-color-swatch {
    border: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
    border: none;
}

::-moz-focus-inner {
    padding: 0;
}


/* Image Credit */
a {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #6B6BFF;
    background: black;
    display: block;
    padding: 0 8px 3px;
    font-size: 15px;
    text-decoration: none;
}