¿Puedo cambiar la apariencia de una imagen html al pasar el mouse sin una segunda imagen?

Question

¿Hay alguna manera de cambiar la apariencia de un ícono (es decir,contraste/luminosidad) cuando coloco el cursor, sin requerir un segundo archivo de imagen (o sin requerir una parte oculta de la imagen)?

Answer 1

Aquí hay buena información sobre la opacidad y transparencia de la imagen con CSS..

Entonces, para crear una imagen con una opacidad del 50%, harías esto:

<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />

El opacidad: Parte es cómo lo hace Firefox, y es un valor entre 0,0 y 1,0. filtrar: Así es como lo hace IE, y es un valor de 0 a 100.

Answer 2

No utiliza una etiqueta img, sino un elemento con un atributo css de imagen de fondo y establece la posición del fondo al pasar el mouse.IE requiere una etiqueta 'a' como elemento principal para el selector :hover.Se llaman sprites CSS.

Un gran artículo que explica cómo usar sprites CSS..

Answer 3

Aquí hay un código para jugar.Idea básica:poner todos los estados posibles de la imagen en una imagen grande, establecer un "tamaño de ventana", que sea más pequeño que la imagen;mueve la ventana usando background-position.

#test {
  display: block;
  width: 250px;  /* window */
  height: 337px; /*  size  */
  background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
  border: 1px solid red; /* for debugging */
  text-indent: -1000px; /* hide the text */
}

#test:hover {
  background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}

<a href="#" id="test">a button</a>

Answer 4

La forma en que normalmente veo las cosas hechas con imágenes más pequeñas, como botones, es que solo se muestra una determinada parte de la imagen.Luego, muchos estados de la imagen formarán una imagen más grande que se desplaza detrás del puerto visible.Eliminaré esto cuando alguien tenga el código.