3

Tengo esta imagen de enlace que va en el Header, y nos lleva a la pagina de inicio, sin embargo no se como hacer para que cuando se pase el mouse sobre la imagen cambie ya sea la opacidad o se ponga más oscura, como para que se sepa que es un botón o enlace, trate de hacerlo en la manera que les muestro pero no funciona.

header a img:hover {
   opacity: 1.0;
   filter: alpha(opacity=100); /* For IE8 and earlier */
}
<header>
  <div class="container">
      <a href="index.html">
      <img class="center-block logo" src="https://i.imgur.com/Mnq96zk.png">
      </a>
  </div>
</header>

3
  • Puse esa imagen pero quizá no sea la más apropiada para probar la opacidad. Procura poner una que si valga y no un recurso local como tenias. Un saludo
    – lois6b
    Commented el 11 sept. 2017 a las 15:26
  • Opacidad es algo no transparente. opacity:1 indica que la opacidad está al máximo, por lo tanto no hay tansparencia, opacity: 0 sería totalmente transparente y no se vería el elemento
    – user7176
    Commented el 12 sept. 2017 a las 9:32
  • Muchas gracias, voy a ensayarlo, gracias.
    – linjai
    Commented el 12 sept. 2017 a las 15:25

1 respuesta 1

6

Cuando indicas que la opacidad sea de 1 significa que la imagen se va a ver de la misma forma que si no la modificaras.

Los rangos van de 0 a 1 siendo 0 = invisible y 1 = visibilidad total. En este caso he añadido una opacidad de un 0.5 para que se vea un efecto cuando pasas por encima de la imagen.

Tu ejemplo modificado:

header a img:hover {
   opacity: 0.5;
}
<header>
  <div class="container">
      <a href="index.html">
      <img class="center-block logo" src="https://i.imgur.com/Mnq96zk.png">
      </a>
  </div>
</header>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.