0

Estoy intentando cambiar una imagen, en especial es el logo de la web... Aparecerá solo en color blanco y al pasar el mouse debe verse el logo a color, para esto use 2 imágenes y el código de abajo, pero ahora el cambio es muy brusco, quisiera cambiar el tiempo en el que hace el cambio o si es posible agregar algún efecto para la transición.

<div class="logo">
  <img alt="logo" onmouseout="this.src='img/favicon.webp';" onmouseover="this.src='img/favicon-color.webp';" src="img/favicon.webp" />
</div>

1 respuesta 1

2

Con un par de lineas de CSS puedes hacer el efecto deseado con transición:

.div1 {
  position: relative;
}

.div1 .div2 {
  position: absolute;  
  top: 0;  
  left: 0;
  opacity: 0;
  transition: .5s;
}

.div1:hover .div2 {
  opacity: 1;
}
<div class="div1">
  <div class="images">
    <img src="https://placeimg.com/200/200/animals">
  </div>
  <div class="div2">
    <img src="https://placeimg.com/200/200/arch">
  </div>
</div>

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.