Estoy diseñando una web de telas y quiero aprovechar los muestrarios que tienen los sastres y diseñadores para que el cliente elija las telas, esos bordes dentados son muy habituales, a los usuarios les resultará una visión muy familiar.
Mi idea es que cada gama, por ejemplo la siguiente:
(http://imageshack.us/a/img820/9163/76vi.jpg) (http://imageshack.us/photo/my-images/820/76vi.jpg/)
...tenga asociada una ficha que aparezca con hover. Igual que en un menú, el retal donde se ponga el cursor tendrá un efecto que lo resalte (quizás aparezca un marco, o las restantes piezas se difuminarán un poco), y al pulsar quedará visible la pieza entera, como abajo:
(http://imageshack.us/a/img842/2212/1cf2.jpg) (http://imageshack.us/photo/my-images/842/1cf2.jpg/)
Al lado aparecerá un tooltip con el nombre del color, tipo de tejido, gramaje, precio por metro, etc. Quizás haga una ficha infomativa reuniendo imagen y texto para cada modelo (¡glub!).
Mi pregunta es: ¿cómo os parece que debería hacerlo, con tooltips mediante javascript, directamente con CSS...?
¡Muchas gracias de antemano por la ayuda! :)
Se puede generar la imagen con dicho borde, y tener una imagen en transparente resaltando los bordes y en la clase de css llamarlo en el :hover
No se si me explique bien :p
O sea que entonces con CSS, sin javascript, ¿no? :) ¡Gracias!
Suponiendo que tienes varias imágenes (con fondo transparente) como la ultima que has puesto... con z-index y margin negativo es facil.
<div id="pruebas">
<ul>
<li class="rojo"></li>
<li class="amarillo"></li>
<li class="azul"></li>
<li class="verde"></li>
</ul>
</div>
#pruebas {}
#pruebas ul {list-style:none;}
#pruebas ul li {
display:inline-block;
width:300px; height:393px;
margin-left:-200px;
position:relative;
transition:margin 0.2s ease-in;
}
#pruebas ul li:hover {margin-left:0 !important; cursor:pointer;}
.rojo {margin-left:0px !important; z-index:900; background:url(rojo.png);}
.amarillo {z-index:800; background:url(amarillo.png);}
.azul {z-index:700; background:url(azul.png);}
.verde {z-index:600; background:url(verde.png);}
Aquí tienes un demo: http://www.drvy.net/cnt/demo/piezas.html
Saludos
¡¡Caramba, un millón de gracias!! ;-) :) ;-) ;-) ;-)
Una cosa: he mirado el código, y hay bastante javascript. ¿Entonces ambas cosas, CSS y javascript?
¡Gracias de nuevo! :)
javascript ? donde ? Si dices el "demo" eso no lo mires.. es cloudflare que agrega automáticamente google analytics. El "código" es lo que he puesto aquí en el post.
Saludos
Ah bien, aclarado mi error, muchas gracias :)