Coloreando imágenes

"Entintar" una imagen, tiñéndola con un color es una idea de Impressive Webs y en su artículo, muestran varios métodos pero de tos ellos, me han gustado los dos que sólo requieren de CSS.

El primero es el que puede ser aplicado en cualquier navegador ya que sólo se permuta la opacidad y por lo tanto, podemos usar filtros en versiones inferiores a IE9.

La idea es sencilla, ponemos una imagen dentro de un DIV con cierta clase:

<div class="simpletint">
  <img src="URL_IMAGEN">
</div>

Y lo que haremos con CSS es colocar un color de fondo en el DIV y cambiar la opacidad cuando se coloque el cursor encima:

<style>
  .simpletint {
    cursor: pointer;
    display: inline-block;
    position: relative;
    -moz-transition: opacity .3s linear;  
    -webkit-transition: opacity .3s linear;  
    -o-transition: opacity .3s linear;  
    transition: opacity .3s linear;  
  }
  .simpletint:hover {
    background-color: #0FF;
    opacity: .5;
    filter:alpha(opacity=50);
  }
</style>

El segundo método hace lo inverso pero, en lugar de utilizar cambios de opacidad, utiliza colores semi-transparentes en formato rgba() y el pseudo-elemento before:

<div class="tint">
  <img src="URL_IMAGEN">
</div>

<style>
.tint {
    cursor: pointer;
    display: inline-block;
    position: relative;
  }
  .tint:before {
    background: rgba(0,255,255, 0.5);
    bottom: 0;  
    content: "";  
    display: block;  
    left: 0;  
    position: absolute;  
    right: 0;  
    top: 0;  
    -moz-transition: background .3s linear;  
    -webkit-transition: background .3s linear;  
    -o-transition: background .3s linear;  
    transition: background .3s linear;  
  }
  .tint:hover:before {
    background: none;
  }
</style>

¿Y si quiero tener una variedad de colores?

Quitamos el color de fondo de la clase tint y creamos otras:

.tint1:before {background: rgba(0,255,255, 0.5);}
.tint2:before {background: rgba(255,255,0, 0.5);}
.tint3:before {background: rgba(255,0,0, 0.5);}
.tint4:before {background: rgba(0,0,255, 0.5);}

<div class="tint tint1"> ....... </div>
<div class="tint tint2"> ....... </div>
<div class="tint tint3"> ....... </div>
<div class="tint tint4"> ....... </div>