Mostrar datos adicionales con algo de estilo y hover | Oloblogger Eso del estilo va porque vamos a jugar un poco con las propiedades CSS, no porque las sugerencias que planteo como ejemplos sean una virguer...

5 de febrero de 2013

Mostrar datos adicionales con algo de estilo y hover

Eso del estilo va porque vamos a jugar un poco con las propiedades CSS, no porque las sugerencias que planteo como ejemplos sean una virguería estética.

Se trata de algo tan sencillo y vistoso a la vez, como hacer aparecer información adicional sobre una imagen al pasar el puntero por encima de ella. Para esto vamos a echar mano de cosas que ya hemos visto en otras ocasiones. Básicamente z-index, position y opacity.

La teoría es que montamos una caja dentro de la cual irá una imagen con enlace y dentro del mismo enlace un span con los datos (texto). Como solaparemos esos elementos en el mismo espacio, el orden lo marcamos con z-index, de manera que el texto quede por encima de la imagen. Como inicialmente no queremos que se vea, le añadiremos también una opacidad (opacity:0;) haciéndolo inicialmente transparente (no visible).

El cambio vendrá con el hover sobre la caja principal, momento en el cual la transparencia será nula (bueno, casi) dejando ver los datos antes comentados.

En la práctica estamos hablando de algo así, pero luego lo complicaremos un poco más:



La explicación sobre el código CSS:

.caja {
position: relative; /*Para poder ubicar la info dentro de la caja*/
margin: 10px auto;
}
.caja img {
border:2px solid black;
}
.info {
position: absolute; /*Info sobre la imagen*/
top: 5%;
left: 10%; /*Desplazamos a partir de la esquina superior izquierda*/
zoom: 1;
filter: alpha(opacity=0); /*Opacidad Para IE */
opacity: 0; /*Inicialmente transparente */
padding: 5px;
color: white;
background: black;
-moz-transition:all ease .8s; /*Aplicamos una ligera transición*/
-webkit-transition:all ease .8s ;
transition:all ease .8s;
}
.caja:hover .info {
filter: alpha(opacity=80);
opacity: .8; /*Al hacer hover sobre la caja hacemos visible los datos*/
}

Con esto anterior en nuestra parte de estilo (entre las etiquetas skin) ya sólo tendremos que crear el HTML con esta estructura para que la cosa salga como en la demo:

<div class="caja"><a href="URL_ENLACE"><img src="URL_IMAGEN" /><span class="info">TEXTO</span></a></div>



Y con esa misma estructura podemos hacer otras cosas si cambiamos un poco el estilo y en lugar de sólo texto añadimos más cosas mediante un segundo span con una nueva clase. Pasa el puntero por esta otra imagen.



.caja2 {
position: relative;
width: 300px;
margin: 10px auto;
}
.caja2 img {
position: relative;
z-index:2; /*Imagen apilada en segunda posición*/
border: 1px solid #333;
box-shadow: 1px 1px 4px #333;
}
.disco {
position: absolute;
top:0;
left:0px;
z-index:1; /*La imagen del disco por debajo de la principal*/
display:block;
width: 300px;
height:300px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5O7dQ40jvmOb5KbF79I1ojqEwwbzZ2kEkt79pSkVcyaarQr1pCGBCtgnZtjpT3PUJFSzdHldFPGulabS9f92V-QLCPslmib72l5F8udAOqeNEY8HoyBjK-zy_6MKhX8ZXximJlTQ94c4/s300/vinilo.png") no-repeat scroll center center transparent;
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.info2 {
position: absolute;
z-index: 3; /*Los datos por encima de todo lo demás*/
top: 30%;
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
padding: 5px;
text-align: center;
color: #eee;
background: #333;
background: rgba(0,0,0,.7);
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.caja2:hover .info2, .caja2:hover .disco {
filter: alpha(opacity=100);
opacity:1;
}
.caja2:hover .disco {
left:100px; /*Para hacer "salir" parcialmente el disco*/
-moz-transform:rotate(180deg); /*Y además lo hace girando*/
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}

En el HTML añadimos un segundo span que tendrá como fondo la imagen del disco. En este caso debe tener el fondo transparente (GIF o PNG):

<div class="caja2"><a href="URL_ENLACE"><img src="URL_IMAGEN" /><span class="info2">TEXTO</span><span class="disco"></span></a></div>


Por último otra idea en la misma línea añadiendo un triangulito al rótulo, animándolo con un volteo y superponiendo una segunda imagen que aparece poco a poco. Como antes, hemos cambiado la opacidad para el efecto del rótulo, pero para el de la segunda imagen hemos jugado con un height inicial igual a cero.

A diferencia del anterior ejemplo, aquí la imagen "móvil" no será fija como sí que era el disco, así que no podemos ponerla como fondo (background). La añadiremos también con un span y la clase oportuna, pero con libertad de añadir la imagen que queramos desde allí.

LE PETIT IDÉE



.caja3 {
position: relative;
width: 300px;
margin: 10px auto;
}
.caja3 img {
width: 300px;
border: 3px solid #333;
-moz-box-shadow: 1px 1px 4px #333;
-webkit-box-shadow: 1px 1px 4px #333;
box-shadow: 1px 1px 4px #333;
}
.info3 {
position: absolute;
top: 30%;
opacity: 0;
width: 200px;
height: 110px;
padding: 5px;
text-align: left;
color: #eee;
background: #C14684; /*Para IE que no soporta RGBA*/
background: rgba(193,70,132,.8);
-moz-transform:rotate(180deg); /*Inicialmente boca abajo*/
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.info3:after {
position: absolute;
top: 0;
right: -120px;
content:"";
display:block; /*Lo siguiente monta el triángulo*/
width:0;
height:0;
border-color:transparent transparent transparent #C14684;
border-color:transparent transparent transparent rgba(193,70,132,.8);
border-style:solid;
border-width:60px;
}
.imagen img {
position: absolute;
top:0;
border: 0;
height: 0; /*Segunda imagen no visible inicialmente*/
-moz-transition:all linear 0.5s 0s;
-webkit-transition:all linear 0.5s 0s;
transition:all ease 0.5s 0s;
}
.caja3:hover .info3 {
filter: alpha(opacity=100);
opacity: 1;
left:-100px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
.caja3:hover .imagen img {
top:0;
left:0;
height:450px !important;
border: 3px solid #333;
}

<div class="caja3"><a href="URL_ENLACE"><img src="URL_IMAGEN" /><span class="imagen"><img src="URL_IMAGEN2" /></span><span class="info3">TEXTO</span></a></div>


A partir de aquí el resto de posibles variaciones os las dejo a vosotros ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

58 comentarios :

  1. Muy interesante. Una forma de mostrar información, aunque no lo creas, con estilo ;)
    Un saludo Oloman.

    ResponderEliminar
    Respuestas
    1. Veo que andas siempre atento a los mensajes "subliminales". Gracias tapicero ;)

      Eliminar
  2. Esto es genial! sin dudas con css se consiguen maravillas como esta,gracias me viene muy bien!

    ResponderEliminar
    Respuestas
    1. Échale imaginación y podrás conseguir otras cosas Coco.

      Eliminar
  3. Muy buen recurso los tooltips. Y parece que tras un tiempo en desuso se están volviendo a tener en cuenta.

    Hay hasta librerías Css para hacer lo mismo, eso sí, con un marcado más "modelno" (data-hint).

    Por cierto, "musho" estilo el que tiene la última... realización ;-)

    ResponderEliminar
    Respuestas
    1. Menos mal que es sólo un comentario sobre modas lo que viniste hoy a hacer por aquí, porque cada vez que veo tu nick en mi correo avisando de un nuevo comentario, vengo acojonadito por los reparos que me sacarás. Creo que ya habrás comprobado que en CSS voy justito... como en casi todo lo demás ;)

      Eliminar
    2. Una vez de pequeño se comió un bollo y... "Zampabollos" de por vida xDD
      Ya sabes que no es esa la intención (o al menos confiaba en que no se notase tanto ;P naah!
      Y por cierto, quítate esa capa de "yo no se nada", que después de tanto tiempo ya no te tapa :-))

      Un saludo

      Eliminar
    3. No es tapadera. Lo digo de verdad. Soy consciente de que mis conocimientos actuales superan la media, pero cuando veo sitios como el tuyo me doy cuenta de que sé muy poco todavía. Además me apura un poco darme cuenta de que puedo estar explicando algo aquí y al mismo tiempo estar diciendo alguna burrada por desconocimiento.

      Ahora gracias a tí ya uso "caja", "declaración" y alguna cosilla más que recuerdo, aunque como tengo mala memoria, de vez en cuando tengo que buscar ese post tuyo explicando la nomenclatura de CSS :)

      Eliminar
  4. Me encanta lo del vinilo. En serio, es lo más sorprendente y efectista que he visto en bastante tiempo. ¿Por qué no lo pones en tu nuevo blog de música? Creo que podría quedar bien...

    ResponderEliminar
    Respuestas
    1. :D :D :D Pensaba que todavía no lo veía nadie, así que gracias por hacerlo tú.

      Precisamente este post surgió a partir de que descartara lo del vinilo para el nuevo blog. Es decir, inicialmente monté ese sistema para ese blog pero luego pensé que iba a seguir intentando no recargarlo. Lo suelo hacer con otros como este, pero con ese me voy a contener todo lo que pueda ;)

      Eliminar
    2. Entonces, con tu permiso, quizá lo pruebe para mi blog de música que no lee nadie ;D

      Eliminar
    3. Si lo he publicado es que público es, así que adelante ;)

      Eliminar
  5. Me gusto mucho la ultima variante y quiero usarla, pero no se le puede cambiar el color rosa por un azul!?

    ResponderEliminar
    Respuestas
    1. Claro que se puede y además es sencillo. El color está en estas dos líneas:
      background: #C14684; /*Para IE que no soporta RGBA*/
      background: rgba(193,70,132,.8);

      #c14684 es la versión hexadecimal de ese color y 193,70,132,.8 la versión RGBA con una opacidad del 80% (o una transparencia del 20%, como prefieras).

      Cualquier editor de imágenes te dará ambos valores para que elijas el azul que quieras, pero también puedes conseguir las dos versiones en esta herramienta que hice hace tiempo.

      Eliminar
    2. Muchas gracias... ya lo instale y aquí están los resultados!!! Creo que la publicidad el quita algo de vista, pero aun así me ayudo mucho.

      http://starbluecomics.blogspot.mx/2013/02/acciones-en-manga-studio.html

      Eliminar
    3. Pues sí, te quedó bien para tu sitio, pero también estoy de acuerdo en que la publicidad le resta. Incluso diría que incordia un poco.

      Eliminar
  6. Respuestas
    1. Yo estoy usando algo muy similar desde hace tiempo con estos efectos pero aún así me dió más ideas

      Eliminar
    2. Eso intentaba, dar ideas. Las posibilidades son las que queráis, es decir, todas!

      Eliminar
  7. PERDONA PERO LOS QUE SOMOS NOVATOS NO ENTENDEMOS MUY BIEN LAS EXPLICACIONES, EN QUE PARTE DEL BLOG SE METEN LAS CAJAS, Y QUE HAY QUE PONER EN LA URL DE ENLACE, PERDONA MI TORPEZA PERO AUN NO LO COJO.

    UN SALUDO

    ResponderEliminar
    Respuestas
    1. Manuel, lo que se indique como CSS siempre va en Blogger entre las etiquetas SKIN de la plantilla. Lo mejor es insertarlo justo antes del cierre por si un día quieres futuro quitar lo que pongas. De esa manera se localiza pronto.

      La parte HTML va dónde quieras mostrar el asunto. En este caso lo normal será ponerlo en los posts o quizás como gadget HTML/JavaScript en la barra lateral.

      Eliminar
  8. Esto me va a ser muy útil, muchísimas gracias por compartirlo.

    ResponderEliminar
  9. Otra cosa, el godigo que se coloca entre las etiquetas SKIN, específicamente la imagen del disco que sale rotando, se puede cambiar o configurar para que cada CD salga con su respectiva carátula, ME GUSRATÍA QUE CADA CD TENGA SU CARATULA? COMO LO HAGO????

    ResponderEliminar
    Respuestas
    1. No, con este código no. Puedes cambiar la imagen externa, pero la del vinilo que sale rodando tiene que ser siempre igual, ya que precisamente es parte del estilo (fijo).

      Eliminar
  10. Es estupendo y muy fácil de implementar.Gracias por facilitarnos el modo de hacerlo Oloman

    ResponderEliminar
  11. Oloman, otra pregunta con resecto a ocultar la sidebar. Tengo instalada una plantilla daptada de Wordpress y funciona a la perfeccion, solo que no puedo encontrar los codigos para ocultarlos. QUE PASA CON ESTE TIPO DE PLANTILLAS? TIENEN OTRO TIPO DE CONFIURACION? http://broadcastmonster.blogspot.com

    ResponderEliminar
    Respuestas
    1. Para ocultar tu barra lateral sólo tienes que aplicar estilo a .sidebar. Prueba a poner esto en tu CSS y desaparecerá del todo:
      .sidebar {
      display: none;
      }

      Eliminar
  12. pero este codigo que me diste para colocarlo en el CSS, solo aplica a ocultar la sidebar cuando se ingresa a una pagina estática? por que quiero conservarla en la pagina principal!

    ResponderEliminar
    Respuestas
    1. No me dijiste que querías sólo ocultarla en algunos tipos de páginas. Para que se vea sólo en la página principal, tendrás que poner después del <body> esto:
      <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <style>.sidebar {display: none;}</style>
      </b:if>

      Y si ya quieres otras opciones de visualización, sólo tendrías que cambiar la condición.

      Eliminar
  13. ¡Hola Oloman!
    Estoy intentando meter enlaces en el texto del que sale en la caja3 y no soy capaz. ¿Me podrías ayudar?
    He juntado esto con http://www.oloblogger.com/2012/07/menu-grafico-zoom-ojo-pez.html y funciona correctamente en el blog.

    ResponderEliminar
    Respuestas
    1. El ejemplo "caja3" va precisamente con un enlace. La única precaución que tienes que tener -en general- cuando metas código en una entrada, es que este lo tienes que redactar todo seguido, sin saltos de línea. Blogger hace cosas raras cuando se meten INTROS.

      Eliminar
  14. Pero lo que busco es meter varios enlaces, no solo uno. Como hacer que funcione el de caja3 si lo conseguí, esta todo muy bien explicado ;). Busco juntar este efecto http://www.oloblogger.com/2012/07/menu-grafico-zoom-ojo-pez.html junto con un menu desplegable. Que al pasar el ratón salga un zoom que yo pueda controlar y además un menu desplegable.

    ResponderEliminar
    Respuestas
    1. ¿Un menú tipo ojo de pez para ampliar un elemento y que en ese elemento pudieran salir varios enlaces y además desplegable? Me he perdido Miguel. Olvida esos dos posts míos que citas y dime exactamente qué quieres hacer. Si tienes ya algo en marcha me pasas el link que lo vea para que sirva de ilustración a lo que comentes.

      Eliminar
    2. Busco que al pasar el ratón encima de la imagen salga zoom (y que pueda controlar el tamaño de la imagen inicial y final como en el código de ojo de pez) y además despliegue un menu con pestañas y subpestañas.

      Eliminar
    3. A ver si lo he entendido. Se trata de hacer una sola imageny que cuando se haga hover sobre ella muestre (solapado al dibujo, supongo) un menú de opciones (de texto, supongo) que además soporte subopciones.

      Bueno, pues si es eso podrías usar el código de la caja3 y en lugar de TEXTO, poner una lista de este tipo: Menú horizontal desplegable.

      Si funciona, quizás una mejor opción sería hacerlo en vertical y para eso te recomiendo que generes el código de estilo para la lista con esta herramienta.

      Eliminar
    4. No he conseguido que funcione. Donde pone texto solo me deja poner texto.

      Eliminar
    5. No aparece el menu con hecho. Sale el código tal como está.

      Eliminar
    6. Recibí tu correo y al ver tu sitio web ya entendí el tema. Seguimos por ahí como te dije, porque lo que quieres va a ser complicado hacerlo con lo que viste publicado en este blog. Aquí publico cosas genéricas y lo tuyo es algo muy específico.

      Eliminar
  15. sabes no entiendo lo de la caja donde pongo ese disculpa mi ignorancia pero apenas voy aprendiendo este es mi blog http://haelsiul.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. En el primer ejemplo tienes dos trozos de código y si te fijas de nuevo verás que se indica dónde poner cada uno de ellos. El primero va en la parte de estilo de la plantilla (CSS, entre las etiquetas SKIN) y el segundo (HTML) iría en una entrada o en un gadget tipo HTML/JavaScript, depende de dónde quieras mostrar el resultado.

      Eliminar
  16. gracias voy a checar bien lo de las etiquetas skin muy buena tu pagina

    ResponderEliminar
  17. hola otra vez yo oyes en mi blog ya le puse el efecto pero me quedo la imajen en la parte superior de lado izquierdo y no se como hacerle quisiera ver si pudieras ayudar gracias este es mi blog http://haelsiul.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. "...y no se como hacerle..." ¿el qué, Luis?

      Eliminar
  18. Hacer que el efecto que aparece en la imagen del lado izquierdo apareciera en la imagen que esta en el centro

    ResponderEliminar
  19. M refiero a la imagen de Windows 8

    ResponderEliminar
    Respuestas
    1. Pues de la misma manera que hiciste con esa imagen en la barra lateral, poniendo el mismo código en la entrada y básicamente, añadiendo la clase CAJA:
      <div class="caja"><a href="http://www.mediafire.com/download/mah359oddcj2qq0/windows+8+links+de+descargas+.txt"><img src="http://4.bp.blogspot.com/-BT2s4XOERjc/Ua4d2T1gibI/AAAAAAAAAQI/kGJr4z_CiVE/s320/images+(1).jpg"><span class="info">TEXTO</span></a></div>

      Eliminar
  20. Hola, he querido aplicar la última variante, pero en el color del rectángulo, cuando le cambio el color rosa por otro, deja de ser transparente. Cómo hago para que conserve la transparencia? Te agradecería mucho la ayuda!!

    ResponderEliminar
  21. Hola Abril. Me vendría mejor ver cómo lo pusiste, pero supongo que será cuestión de que no usaste colores RGBA. Eso es esta línea:
    background: rgba(193,70,132,.8);

    El .8 indica el nivel de transparencia, siendo 0.0 transparencia total y 1.0 opacidad total.

    ResponderEliminar
  22. buaaa. no me queda. me salen las imagenes dispersas una en donde quiero y la otra hasta arriba del lado izquierdo. no se acoplan
    mi pagina es jimdo. sera eso?? saluds

    ResponderEliminar
    Respuestas
    1. En un principio no tiene nada que ver que sea Jimdo. La clave de cualquiera de estos "gadgets" es usar una posición absoluta para el elemento oculto y que este sea visible cuando se hace hover. Revisa esa parte.

      Eliminar
  23. Wooooooooooooooow genial me sirvio mucho

    ResponderEliminar
  24. Muy bueno. Por cierto, ¿no conocerás alguna manera de modificar la plantilla para que al pasar el ratón sobre la imagen (en la página principal) aparezcan los nombre de las etiquetas de dicho post?

    Mil gracias ;)

    ResponderEliminar
    Respuestas
    1. Sé cómo hacerlo Jose, pero es complejo explicarlo de manera que funcione de forma general para TODAS las plantilla. Eso es una tarea muy personalizada.

      Eliminar
  25. Me parece excelente, pero me surge una duda que estoy intentando hacer desde hace mucho tiempo y no tengo forma de realizarlo. Desde luego para mi es todo un reto. He creado una tabla, y dentro de esa tabla existen un número de celdas determinado. Ahora cuando pase el ratón por el texto de algunas de las celdas debería mostrar una imagen. ¿Cómo podría modificar estos códigos para conseguir este efecto? Gracias.

    ResponderEliminar
    Respuestas
    1. Hola Manuel. La clave es que entiendas cómo funcionan esos tres ejemplos porque así podrás hacer lo que quieras de la manera que quieras.

      De todas formas esta sería una manera de hacer en concreto lo que quieres. Pero ya te anticipo que probablemente tendrás que resolver otros problemas menores que te surgirán.

      <table class="demo">
      <tr>
      <td>
      TEXTO QUE SALE DE INICIO
      <img src="http://2.bp.blogspot.com/-y89GfhcNJMg/UQ7xvD3dMcI/AAAAAAAAIA0/oCNRPkzhxbY/s400/abbey-road-the-beatles.jpg" />
      </a>
      </td>
      </tr>
      </table>
      <style>
      .demo td {
      position: relative;
      border: 1px solid grey;
      }
      .demo td img {
      display:none;
      position: absolute;
      top: 0;
      left: 0;
      }
      .demo td:hover img {
      display: block;
      }
      </style>

      Eliminar
    2. Y por aquí tienes otra explicación para cambiar una imagen por otra con :hover.

      Sólo tendrías que sustituir la primera imagen por texto y ya lo tendrías como quieres.

      Hay muchas maneras de hacer eso.

      Eliminar
  26. disculpa tengo duda como poner la info en cada imagen si tengo 4 imágenes en el mismo post y quiero que salgan en cada imagen la info

    ResponderEliminar