Hover List
Lista de filas con pastilla o número, que al hacer hover se desplazan y muestran una vista previa
Los ejemplos son solo una parte. Cada tile tiene además las opciones avanzadas: animaciones, efectos del ratón, visibilidad por dispositivo o por fecha, posición y mucho más.
01
Recién añadido
Así se ve nada más añadirlo a la página, antes de cualquier cambio.
02
La carta de colores de una tienda de pinturas
Pastillas redondas con los colores del tema mezclados, nombres oscuros sobre un recuadro claro; al hacer hover la fila se desplaza, se tiñe de rojo y la pastilla se agranda.
03
La carta de vinos de una vinoteca
Sobre un fondo noche: pastillas cuadradas color vino, nombres claros en mayúsculas, añada y precio en monoespacio a la derecha; al hacer hover la fila se ilumina ligeramente.
04
Los servicios de un estudio, como una sala de control
Números progresivos en lugar de las pastillas, nombre grande y descripción a la derecha; al hacer hover aparece el «monitor» que sigue el cursor y el número pasa a rojo.
05
El guardarropa de una boutique, con vista previa
Al hacer hover sobre cada prenda aparece su foto (vista previa 3:4 de 220 px de ancho) junto al cursor; filas compactas, pastillas pequeñas con el color del tejido sobre un fondo melocotón.
06
El programa del festival, una noche por fila
Cada elemento tiene su propio fondo (tonos y degradados del tema), el número es la fecha y la columna derecha el lugar: un cartel a franjas dentro de un recuadro redondeado.
07
Las jugadoras, con la foto al hacer hover
Número de camiseta en lugar del progresivo, posición a la derecha en monoespacio, nombres claros sobre un fondo azul; al pasar sobre un nombre aparece la foto de la jugadora.
