JMiur [E]

"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>




5 comentarios:

Graciela  

Me encanta Jmiur :D

Responder
Johnny  

El hover con opacidad hace un tiempo que lo uso en mi blog, es un efecto que queda bien y a veces mucho mejor que poniendo un color. El otro con colores de background esta muy bien y da un toque cool. Saludos>>

Responder
Adrián J. Messina  

Que bueno, es un blur en colores , muy cool.

Un abrazo.

Responder
Gem@  

Me encantó entintar :) a veces lo sencillo se convierte en llamativo ya no solo por el post sino por el tema porque a todos nos gusta jugar con imágenes :)

Responder
JMiur  

Es sencillo, no puede pedirse más :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR