Check the new version here

Popular channels

Efecto hover cambio de imagen

Hola amigos hoy les enseñare como realizar el efecto hover con cambio de imagen.

Ejemplo de la siguiente pagina --> ginecologo en cancun



El efecto es muy simple y consiste trata de tener 2 imágenes similares y realizar el cambio de imagen cuando se coloca el puntero del mouse en la imagen.

Dicho de esta forma tenemos la “imagen 1” al colocar el mouse sobre dicha imagen muestre la “imagen 2”

Para ello necesitamos 2 imágenes del mismo tamaño, y forma pero de diferente color.

Para lograr dicho efecto creamos los div que contendrán las imágenes.



Cada div tiene nombres diferentes puesto que cada uno tendrá imágenes diferentes, ahora se les da su respectivo estilo css.



Ahora tenemos los div con su imagen de fondo

Creamos el efecto hover donde aplicaremos el cambio de fondo con las nuevas imagenes.



y listo ya lo tenemos terminado ¿simple verdad?



Demo

Sigueme por Facebook Twitter Google+
0
0
0
2
0No comments yet