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 Noah Blon on CodePen.

License.

index.html

<!-- CLICK TO CHANGE COLOR -->
<input type="color" value="#0000ff">

<!-- Image Credit -->
<a href="https://www.flickr.com/photos/betabit/9284591662/" target="_blank">Photo by Jackson Faddis</a>

style.css

body {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg) 25%/cover;  
    height: 100vh;
    margin: 0;
}

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;
    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: skyblue;
    background: black;
    display: block;
    padding: 3px 8px;
    font-size: 18px;
    text-decoration: none;
}