4 tooltips y 4 enlaces en el mismo elemento en función del lado por donde hagas :hover 22.1.13
Cuatro tooltips por cada imagen, con enlaces distintos en cada uno y con contenidos diferentes en cada tooltip en función del lado por que hagamos :hover sobre la miniatura. Todo en puro Css.
4 tooltips y 4 enlaces en el mismo elemento en función del lado por donde hagas :hover
El recurso del tooltip o globo emergente es un recurso muy común para complementar la info sobre el elemento al hacer :hover sobre él. En la mayoría que conozco la cantidad de información extra es "una sóla", siempre la misma y no suele ser muy extensa por la propia naturaleza y función del tooltip. Y en casos como galerías, la miniatura es sólo un enlace.
Así que en el artículo vamos a ver cómo ofrecer cuatro tooltips por cada imagen, con enlaces distintos en cada uno y con contenidos diferentes en cada tooltip en función del lado por que hagamos :hover sobre la miniatura. Todo en puro Css.
Juega en la imagen de abajo, entra en la imagen por su lado izquierdo o derecho; por arriba o por abajo y observa. También puedes acercarte desde el centro a los lados (sin salir de la imagen).
El marcado Html
Como es lógico, si queremos tener cuatro enlaces con su diferente destino correspondiente e información asociada a cada uno, esto es lo que debemos incluir en el html además de la imagen común. Así que nada más simple que:
<div id="ejemplo">
<div class="multiples">
<a href="#">KsesoCss
puro CSS</a>
<a href="#">11 meses
213 posts</a>
<a href="#">en Blogger
desde 02-2012</a>
<a href="#">Con licencia
Beerware</a>
<img alt="galería múltiples tooltips y enlaces por cada imagen" src="tooltip_1.jpg" />
</div>
</div>
La razón de colocar la imagen vía src="ruta" y no como fondo está en que la considero parte de la información, no del ornamento.
El Css asociado
Lo divertido viene ahora: jugar un poco con el Css. Así que vamos a ello. Lo primero es posicionar de forma absoluta cada uno de los enlaces y hacerlo de tal manera que una parte de cada enlace quede "dentro" del contenedor general y por lo tanto accesible al :hover.
El resultado buscado es el de la imagen:
div.multiples {
float:left;
position: relative;
overflow: hidden;
}
div.multiples img {
width: 100%;
}
div.multiples a {
box-sizing: border-box;
color: white;
display: table-cell;
height: 100%;
opacity: 0;
padding: 10% 0 0;
position: absolute;
text-align: center;
width: 100%;
transition: all 0.5s linear 0s;
}
Observa que omito los prefijos privativos y algunas propiedades que no son necesarias. En el jsfiddle de arriba, en la pestaña "css" los tienes completo.
Ahora desplazamos cada uno de los enlaces para que queden desplazados cada uno a su lateral a la vez que declaramos un fondo diferente a cada uno para que sea más claro que son distintos. Para esto nos viene ni que pintados los selectores de número de hijo:
div.multiples a:nth-child(1) {
background: rgba(0,0,0, 0.55);
left: 0;
top: -80%;
}
div.multiples a:nth-child(2) {
background: rgba(255,0,0, 0.55);
left: 90%;
top: 0;
}
div.multiples a:nth-child(3) {
background: rgba(0,128,0, 0.55);
left: 0;
top: 80%;;
}
div.multiples a:nth-child(4) {
background: rgba(0,0,255, 0.55);
left: -90%;
top: 0;
}
A estas alturas ya está hecho la mayor parte del trabajo. Sólo queda pendiente recolocar cada enlace en su sitio al hacer :hover sobre él, ocupando toda la imagen:
div.multiples a:hover {
bottom: 0;
left: 0 !important;
opacity: 1;
right: 0;
top: 0 !important;
}
Y eso es todo. Mucho más sencillo y simple de lo que parecería.
Una galería completa
Y como todo en css es susceptible de llevarlo un poco más allá, como primera extensión del efecto podríamos aplicarlo a una galería con thumbnails. Así en un mínimo de espacio (cada miniatura) podremos ofrecer más información y opciones.
Puedes ver la demo de abajo a pantalla completa en este pen.
Check out this Pen!
Ahora sólo es cuestión de que le pongas un poco de imaginación y juegues con el ejemplo a ver qué obtienes tú. Por ejemplo, mezclandolo con el efecto de ésta galería.
Y no te olvides de compartir tu juego u opinión en los comentarios.
Mejoras y variaciones por los usuarios
Hay usuarios del blog que han aceptado la invitación de hacer variaciones de este concepto y compartirlas. A continuación las iré incluyendo a medida que las vaya conociendo.
Chistian: tooltip 4x1
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Excelente, solo le faltaría algo que diga que están ahí los tooltip, como una flechita.
ResponderEliminarY sólo como observación es que funciona muy bien con el giro horario hasta llegar al cuarto tooltip, y luego hay que salir de la imagen para retomar el efecto, supongo que debido a la posición en el html.
Me gustó, voy a jugar un rato con él.
Saludos
Hola Cristian
ResponderEliminarGracias por la visita y las buenas palabras.
Sí. Como bien dices le falta mucho para poder "pasar a producción". Es sólo un juego, una propuesta o concepto. Y a partir de él, pulirlo.
Siempre puedes recurrir a los pseudoelementos para introducir ese "aquí hay algo" y cambiar opacity:0 por visibility y que cada enlace al desplegarse no cubra los laterales de los otros 3. Por ejemplo.
Si lo mejoras no te olvides de pasarte por aquí a mostrarnoslo.
Un saludo
Hola kseso, no creo que sea una mejora pero bue allá va:
ResponderEliminarhttp://jsfiddle.net/c2am/nscTN/2/embedded/result/
Sobre la base del ejemplo de ksesocss
Descripción:
Cuatros tooltips que se pueden acceder desde las esquinas de la imagen.
También se pueden mostrar parcialmente ubicando el puntero del mouse en el centro de la imagen para luego hacer hover sobre el Tooltips que nos interese.
Creo que esto ya lo he visto, o tal vez no, con lo cual quiero decir que la idea tal vez no sea muy original, pero no es un copipaste, excepto la base de kseso debidamente aclarado al inicio, y por lo cual será enviada la respectiva cerveza a la brevedad.
Saludos
Gracias Cristian... por la cerveza, digo xD
ResponderEliminarInteresante la propuesta y creativo el "hey! aquí hay..."
La incluyo en el artículo con el enlace a tu comentario.
Gracias también por la demo ;-}
Un saludo
Excelente, y explicación paso a paso, que más se puede pedir, gracias !
ResponderEliminar