¿Cómo hago este efecto: con CSS, con javascript...?

[Linton]

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:

...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:

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! 

[Shell Root]

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

[Linton]

O sea que entonces con CSS, sin javascript, ¿no?  ¡Gracias!

[#!drvy]

Suponiendo que tienes varias imágenes (con fondo transparente) como la ultima que has puesto... con z-index y margin negativo es facil.

Código (html4strict) [Seleccionar] Expandir

<div id="pruebas">
  <ul>
    <li class="rojo"></li>
    <li class="amarillo"></li>
    <li class="azul"></li>
    <li class="verde"></li>
  </ul>
</div>

Código (css) [Seleccionar] Expandir

#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

[Linton]

¡¡Caramba, un millón de gracias!!   

[Linton]

Una cosa: he mirado el código, y hay bastante javascript. ¿Entonces ambas cosas, CSS y javascript?

¡Gracias de nuevo!

[#!drvy]

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

[Linton]

Ah bien, aclarado mi error, muchas gracias