texto - ¿Escala de grises con CSS y cambio de color al pasar el mouse?

mostrar texto al pasar el mouse css

Question

Estoy buscando tomar un icono que sea de color (y que sea un enlace) y convertirlo en escala de grises hasta que el usuario coloque el mouse sobre el ícono (donde luego colorearía la imagen).

¿Es posible hacerlo, y de una manera que sea compatible con IE y Firefox?

Answer 1

Aquí hay una demostración. Incluso funciona en IE7:

http://james.padolsey.com/demos/grayscale/

y

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

Answer 2

Existen numerosos métodos para lograr esto, que detallaré con algunos ejemplos a continuación.

CSS puro (usando solo una imagen coloreada)

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=/'http://www.w3.org/2000/svg/'><filter id=/'grayscale/'><feColorMatrix type=/'matrix/' values=/'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0/'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=/'http://www.w3.org/2000/svg/'><filter id=/'grayscale/'><feColorMatrix type=/'matrix/' values=/'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0/'/></filter></svg>#grayscale");
  /* Firefox 3.5+, IE10 */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(100%);
  /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease;
  /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden;
  /* Fix for transition flickering */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

svg {
  background: url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}

<p>Firefox, Chrome, Safari, IE6-9</p>
<img class="grayscale" src="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" width="400">
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  <defs>
     <filter id="filtersPicture">
       <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
       <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
   </svg>

Puede encontrar un artículo relacionado con esta técnica aquí .

CSS puro (usando una escala de grises e imágenes de colores)

Este enfoque requiere dos copias de una imagen: una en escala de grises y la otra a todo color. Usando CSS :hover psuedoselector, puede actualizar el fondo de su elemento para alternar entre los dos:

#yourimage { 
    background: url(../grayscale-image.png);
}
#yourImage:hover { 
    background: url(../color-image.png};
}

#google {
  background: url(''http://www.google.com/logos/keystroke10-hp.png'');
  height: 95px;
  width: 275px;
  display: block;
  /* Optional for a gradual animation effect */
  transition: 0.5s;
}

#google:hover {
  background: url(''https://graphics217b.files.wordpress.com/2011/02/logo1w.png'');
}

<a id=''google'' href=''http://www.google.com''></a>

Esto también se puede lograr mediante el uso de un efecto de desplazamiento basado en Javascript, como la función hover() jQuery, de la misma manera.

Considere una biblioteca de terceros

La biblioteca desaturate es una biblioteca común que le permite cambiar fácilmente entre una versión en escala de grises y una versión a todo color de un elemento o imagen determinados.

Answer 3

Puede usar un sprite que tenga ambas versiones, la coloreada y la monocromática, almacenadas en ella.

Answer 4

Respondido aquí: Convierta una imagen a escala de grises en HTML / CSS

Ni siquiera necesita usar dos imágenes que suenan como una biblioteca de dolor o de manipulación de imágenes, puede hacerlo con soporte de navegador cruzado (versiones actuales) y simplemente usar CSS. Este es un enfoque de mejora progresiva que simplemente vuelve a las versiones de color en los navegadores más antiguos:

img {
  filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */
}
img:hover {
  filter: none;
  -webkit-filter: none;
}

y el archivo filters.svg de esta manera:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
  </filter>
</svg>

Answer 5

Uso el siguiente código en http://www.diagnomics.com/

Suave transición de b / w a color con efecto de aumento (escala)

    img.color_flip {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img.color_flip:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    }