Efecto estraño con css
Publicado por mblascog (3 intervenciones) el 23/01/2013 17:12:38
Buenas,
Tengo una tabla. En cada celda visualizo una imagen con un borde delgado y un texto. Por css, implemento que al pasar por encima de una celda con el ratón,, el borde de la imágen sea más grande. Pero se da un efecto de movimiento que no me gusta. En el siguiente enlace se puede ver un ejemplo de lo que digo:
http://www.tepui.cat/cumer/enllacos.html
El código css es:
Y el código HTML és:
Gracias
Tengo una tabla. En cada celda visualizo una imagen con un borde delgado y un texto. Por css, implemento que al pasar por encima de una celda con el ratón,, el borde de la imágen sea más grande. Pero se da un efecto de movimiento que no me gusta. En el siguiente enlace se puede ver un ejemplo de lo que digo:
http://www.tepui.cat/cumer/enllacos.html
El código css es:
1
2
3
4
5
6
7
.taulaEnllacos {width:1000px; height:500px; margin: 0px 0px 0px 0px; border:0px; }
.cellaEnllacos td {width:250px; text-align: center; }
.cellaEnllacos td img { border: 1px solid #E87513 }
.cellaEnllacos td img:hover { border: 4px solid #E87513 }
.cellaEnllacos td a {font: 0.8em 'trebuchet MS', Arial, Helvetica; color: #000; }
.cellaEnllacos td a:hover {color: #000000; }
.cellaEnllacos td a:visited {color: #000000; }
Y el código HTML és:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table class=taulaEnllacos>
<tr class="cellaEnllacos">
<td><a href=http://www.herockworkwear.com/en/><img src='images/WebHerock.png' width='210' height='150'/></a><br/>
<a href=http://www.herockworkwear.com/en/>HEROCK® WORKWEAR</a>
</td>
<td><a href=http://www.roly.es/default.aspx/><img src='images/WebRoly.png' width='210' height='150'/></a><br/>
<a href=http://www.roly.es/default.aspx/>ROLY</a>
</td>
<td><a href=http://www.job-wear.com/anunciante/1_215/><img src='images/WebJobWear.png' width='210' height='150'/></a><br/>
<a href=http://www.job-wear.com/anunciante/1_215/>JOB WEAR - Magazine</a>
</td>
<td><a href=http://www.proteccion-laboral.com/ediciones/><img src='images/WebProteccionLaboral.png' width='210' height='150'/></a><br/>
<a href=http://www.proteccion-laboral.com/ediciones/>PROTECCIÓ LABORAL – Magazine</a>
</td>
</tr>
<tr class="cellaEnllacos">
<td><a href=http://www.seguridad-e-higiene.com.ar/><img src='images/WebSeguridad.png' width='210' height='150'/></a><br/>
<a href=http://www.seguridad-e-higiene.com.ar/>SEGURIDAD E HIGIENE – Informació</a>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Gracias
Valora esta pregunta
0
Es una posible solución, aunque me gustaría tal como lo tengo planteado.