CodePen

HTML

            
              <h1>DEMO: Cambio de color de una imagen a travez de puro CSS</h1>
<p>(por el momento solo en chrome) Haz click en un color y observa la magia</p>

<input type="radio" name="color" id="morado"/>
<input type="radio" name="color" id="azulcyan"/>
<input type="radio" name="color" id="verde"/>
<input type="radio" name="color" id="azul"/>
<input type="radio" name="color" id="fresa"/>
<input type="radio" name="color" id="cafe"/>
<input type="radio" name="color" id="gris"/>

<img src="http://www.cheapsportsshopnz.com/images/Nike_Dunk_SB/Nike_Dunk_SB_2012_New_Low_Cut_Mens_Shoes_blue_white.jpg" alt="zapato" />

<label for="morado"></label>
<label for="azulcyan"></label>
<label for="verde"></label>
<label for="azul"></label>
<label for="fresa"></label>
<label for="cafe"></label>
<label for="gris"></label>

<div><pre>&#60;spam&#62;</pre><b>Diseñado por:</b> Edgar Gutiérrez, <b>G3Kdigital</b><pre>&#60;/spam&#62;</pre></div>

<h3>Créditos</h3>
<p><b>inspiración:</b> <a href="https://plus.google.com/104456917648169426042/posts/BhYrLUTn98f">este post</a> y a <b>@kseso</b> que me enseño a usar los filter de CSS y que además le encontro un <a href="http://ksesocss.blogspot.com/2014/07/cien-tonos-color-una-imagen-css.html">uso práctico</a></p>
            
          
!

CSS

            
              /*SOLO CON ESTOS ESTILOS SE LOGRA EL EFECTO*/

input{display: none}
label::after {content: attr(for)}

#morado:checked ~ img {  filter: hue-rotate(45deg); }
#azulcyan:checked ~ img {  filter: hue-rotate(-54deg); }
#verde:checked ~ img {  filter: hue-rotate(280deg); }
#azulcielo:checked ~ img {  filter: hue-rotate(-10deg); }
#fresa:checked ~ img {  filter: hue-rotate(100deg); }
#cafe:checked ~ img {  filter: hue-rotate(180deg) saturate(1.8); }
#gris:checked ~ img {  filter: saturate(0); }





/*ESTILOS SON MAS DECORATIVOS QUE FUNCIONALES*/

*{box-sizing: border-box; text-align: center; }
html,body{ font: 16px arial; color: gray; }
input[name="color"]:checked ~ img {animation-name: none;}
label{display: inline-block;padding: 1rem; transition: all linear .3s; border: solid whitesmoke 0.1rem;}
label::before {content: ''; display: inline-block; width: 1rem; height: 0.8rem; margin-right: 0.5rem;}
label:hover{letter-spacing: 0.25rem;}
pre{display: inline-block; padding: 0.5rem;}
img{animation: color 10s linear infinite; display: block; margin: auto;}
a,a:link,a:visited{color: darkcyan; text-decoration:none; border:0.1rem solid; border-radius: 0.2rem; display: inline-block; padding: 0 0.5rem;}
[for="morado"]::before{background:rgb(160,50,215);}
[for="azulcyan"]::before{background:rgb(0,150,150);}
[for="verde"]::before{background:rgb(0,150,50);}
[for="azul"]::before{background:rgb(50,100,200);}
[for="fresa"]::before{background:rgb(200,50,100);}
[for="cafe"]::before{background:rgb(150,100,70);}
[for="gris"]::before{background:rgb(100,100,100);}
#morado:checked ~ [for="morado"],
#azulcyan:checked ~ [for="azulcyan"],
#verde:checked ~ [for="verde"],
#azul:checked ~ [for="azul"],
#fresa:checked ~ [for="fresa"],
#cafe:checked ~ [for="cafe"],
#gris:checked ~ [for="gris"]{border: solid lightgray 0.1rem;}
@keyframes color
  {
    0%{filter: hue-rotate(0deg)}100%{filter: hue-rotate(360deg)}
  }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................