Dudas sobre el hover.

¡Hola!
Hoy seré tu guía. Un gusto.
Bieeeeeen, ya tengo un poco de experiencia explicando este tema (debería hacer un tutorial para todos, a que sí? xd), así que si no entiendes algo, se libre de preguntar.

¡Empecemos!
Algo que debes saber es que un hover es una propiedad que se activa cuando yo paso el cursor sobre un objeto. Sencillo, sí. Y dependiendo de las propiedades que le de, puedo crear varios efectos. Pero empezaremos con el más sencillo, el de 'opacity'. ¿Has pasado el cursor por una imagen y lentamente aparece otra encima? Pues eso.

Primero, tomaré dos imágenes, una en divs diferentes. Así:






Lo que quiero es que la segunda sea la que, al pasar el el cursor por la primera, se muestre. Para hacer eso, primero nombraré a la segunda con un "id=", que es para diferenciar este objeto de los demás. Se pone antes del "style=" en el (Va sin el *, pero lo pongo para que el CSS del foro no o oculte) . Así:

Código:

<div id="a1" style="background-image: url(http://i.imgur.com/yeBTSB1.png); width: 500px; height: 200px; margin: auto;"></div>

Puedes ponerle el nombre que quieras, pero te recomiendo que sean sencillos y que no sean tan obvio, como "hover" o "img", ya que si alguien más tiene, por casualidad, una firma o una tabla con esos nombres, los atributos se combinarán y serán un problema.

Bien, una vez lo he nombrado, copiare este code dentro de la imagen anterior, dentro del div.

Código:

<div style="background-image: url(http://data3.whicdn.com/images/140798141/large.png); width: 500px; height: 200px; margin: auto;">AQUIAQUIAQUI</div>


Me quedará así:

Ahora voy a crear el CSS que hará todo posible, empezando con un <*style type="texto/CSS"*> (sin el *) y cierro

Dentro de esto, voy a llamar al objeto con un #, sí, como si fuera un hagstag, y abriré llaves. De la siguiente manera:

Código:


<style type="text/CSS">
#a1 { }
</style>


Este code funciona así. Dentro de las llaves puedo poner varios atributos, los que yo quiera, para definir el div. Y como quiero que no se vea, el atributo que colocaré sera 'opacity', que se mide de 0 a 1, siendo 0 transparente y 1 totalmente visible.

Código:


<style type="text/CSS">
#a1 {opacity: 0; }
</style>


Y entonces:

¡Ta-da!

Ahora, para que se vuelva a ver, dentro de las mismas llaves volveré a llamar al objeto y ésta vez añadiré la propiedad :hover.

Código:

<style type="text/CSS">
#a1 {opacity: 0; } #a1:hover { }
</style>


Y dentro de las llaves de hover, colocaré lo que quiero que pase, en este caso, que la opacidad aumente.

Código:


<style type="text/css">#a1 {opacity: 0;} #a1:hover {opacity: 1;}</style>


Pasa el cursor:

Yaaaay!
Pero, eh, eso que salga tan de la nada se ve muy feo, no? entonces añadiré transitions, esto hará que vayan más lento. Mira, las transitions funcionan así:

transition: dónde cuántotiempo quétipo

En donde se coloca "all", ya que quiero que funcione en todo tipo de objeto. En quétipo puedo elegir entre: ease-in , ease-out , ease-in-out (la que yo más uso), ease y linear. Cuántotiempo es el tiempo en segundos, claro. Me quedaría así:

Código:

transition: all 1s ease-in-out;

Esto lo pongo antes de cerrar ambas llaves:

Código:


<style type="text/css">#a1 {opacity: 0; transition: all 1s ease-in-out;} #a1:hover {opacity: 1; transition: all 1s ease-in-out;}</style>


¡Y LISTO!

Code final:

Código:



<div style="background-image: url(http://data3.whicdn.com/images/140798141/large.png); width: 500px; height: 200px; margin: auto;"><div id="a1" style="background-image: url(http://i.imgur.com/yeBTSB1.png); width: 500px; height: 200px; margin: auto;"></div></div>

<style type="text/css">#a1 {opacity: 0; transition: all 1s ease-in-out;} #a1:hover {opacity: 1; transition: all 1s ease-in-out;}</style>


Si aún tienes dudas, eres libre de preguntar. Perdón por la 'estética' y si hay algún error, pero es que ando desde mi tablet