JMiur [E]

Aunque me ha costado armarlo para que funcionara acá porque hay cosas que no termino de entender bien, la idea de crear efectos hover que muestren contenidos distintos según sea la dirección desde la cual se entra con el cursor, no deja de ser interesante.

Lo básico es empezar con el HTML que no es otra cosa que un DIV donde incluimos cuatro etiquetas SPAN con los textos y una imagen.
<div class=multi-hover>
  <span>hover desde la derecha</span>
  <span>hover desde arriba</span>
  <span>hover desde la izquierda</span>
  <span>hover desde abajo</span>
  <img src="https://lh5.googleusercontent.com/-RAUoNEersrc/UGt18u6HXyI/AAAAAAAACwo/QWa2I1zG7Y0/s400/24_0144.jpg">
</div>
Si se usa en una entrada de Blogger, habrá que tener en cuenta que todo debe ser escrito en una sola línea para evitar los saltos (etiquetas BR) que se agregan por defecto.

El resultado sería esto:

hover desde la derechahover desde arribahover desde la izquierdahover desde abajo

Y el CSS:
<style>

  /* el contenedor y la imagen */
  div.multi-hover {
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 100%;
    /* tuve que establecer la altura para que los textos se centraran verticalmente */
    height: 358px;
    line-height: 358px;
  }
  div.multi-hover img {width: 100%;}

  /* los textos que, por defecto, permanecerán ocultos */ 
  div.multi-hover span {
    color: #FFF;
    font-size: 32px;
    height: 100%;
    opacity: 0; 
    position: absolute;
    text-align: center;
    transition: all 0.3s linear 0s; /* agregar los prefijos para cada navegador */
    width: 100%;
  }

  /* y esto es lo que generará el efecto */

  div.multi-hover span:nth-child(1) { /* desde la derecha */
    background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);
    left: 90%;
    top: 0;
  }
  div.multi-hover span:nth-child(2) { /* desde arriba */
    background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);
    left: 0;
    top: -80%;
  }
  div.multi-hover span:nth-child(3) { /* desde la izquierda */
    background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);
    left: -90%;
    top: 0;
  }
  div.multi-hover span:nth-child(4) { /* desde abajo */
    background: none repeat scroll 0 0 rgba(127, 38, 216, 0.6);
    left: 0;
    top: 80%;
  }

  /* los hacemos visibles ... */
  div.multi-hover span:hover {opacity: 1;}

  /* ... moviéndolos horizontalmente ... */
  div.multi-hover span:nth-child(2n+1):hover {left: 0;}
  /* ... o verticalmente ... */
  div.multi-hover span:nth-child(2n):hover {top: 0;}

</style>
Para probar si los valors que colocamos son correctos, lo que conviene es poner opacity: 1; en la regla div.multi-hover span {} y ver el resultado. En este caso, debería verse algo así:


Al dejarlos "visibles", podemos ver como los SPAN se superponen un poco en la imagen que es, justamente, la forma en que serán detectados por el hover. De ese modo, una vez que los hayamos ubicado, tenemos listo el efecto y podemos ocultarlos definitivamente.

REFERENCIAS:demosthenes.info

12 comentarios:

Graciela de Palomas  

Imagine solo imagine, si le ha costado Don Jmiur, lo que puede sucederme, sea paciente con éste mujer opsss se desapareció una imágen :D

Responder
Graciela de Palomas  

ahhh no apareció

JMiur  

¿Problemas?

Responder
Jesús Dugarte  

al parecer el css sigue teniendo un gran futuro y va a pasos agigantados, gracias por el aporte. Saludos.

Responder
Alcion Inugami  

Hola JMiur! a mi lo que se me ocurre es ocultar totalmente cada span y añadirles un pseudo elemento before, estos últimos rotados 90º se colocan en cada extremo, asi los span no se sobreponen en las esquinas... no se si te fijas pero en tu ejemplo cuando mueves el cursor por la parte superior izquierda el span que se activa es el de la izquierda en lugar de el de arriba
Bueno, explicado asi es un poco difícil entenderlo pero te dejo un link para que lo veas tu mismo: LINK.
No sé que opines, saludos!

Responder
Gem@  

Fantástico, una maravilla. Voy a probarlo :)

Responder
Andrea Laura  

Hola, disculpa las molestias, pero tengo un problema, en la herramienta de webmaster, me sale que tengo paginas con etiquetas de titulo duplicadas y es esto :

TEMPLATE ERROR: No dictionary named: 'bog' in: ['blog', 'skin', 'view'] | datosparamujeres

La verdad, no tengo idea del motivo que ocurre aquello, si me pudieras ayudar me harias un gran favor, mi blog es

http://datosparamujeres.blogspot.com

JMiur  

Pues lo único que se ve en ese blog es la fecha de las entradas, sea cual se al página que se abra, home, etiquetas o individuales por lo tanto, imagino que tienes un error en la plantilla misma cosa que no puede saberse mirando el sitio online.

Responder
Andrea Laura  

Gracias por tu respuesta. Pero de ser asi, entonces la unica via de solucionarlo, seria cambiando de plantilla ?¿. Lo otro, encontre una pagina en ingles, donde dicen solucionar el asunto, la verdad, que de ingles se poquito. Si eres tan amable, podrias mirar y decirme si esta en lo correcto, te dejo el link.

http://www.buggybread.com/2013/03/template-error-invalid-data-reference.html

JMiur  

Lo que dice allí es lo siguiente:

el error suele ser causado cuando se colocan ciertos códigos que deben estar en el widget Blog, fuera de este.

Expandir artlugios y buscar:
<b:includable id='post' var='post'>
revisar que este se encuentre dentro de:
&lt:b:includable id='post' var='post'>
si no es así, copiarlo y ponerlo allí, eliminando el otro.

No puedo decirte si ese es tu problema ya que sólo viendo la plantilla podría verse.

Responder
_el negro_  

De mil! de lo mas sencillo que vi.. de las mejores soluciones! saludos!

Responder
Carlos Zúñiga  

Que Genial, cada vez me impresiono más con este blog :D
gracias!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR