He buscado por internet un código para al situar el puntero por encima de la imagen, esta se amplie. Funciona bien, lo que pasa, es que al ampliarse la imagen, parte de la imagen ampliada queda detrás de la imagen todavía pequeña que hay en la fila de la derecha. El caso es que por más que pruebo, no sé que parte del código tocar para solucionarlo.
El código es este:
Código HTML:
</head> <style type='text/css'> .thumbnail{position: relative; z-index: 0;} .thumbnail:hover{ background-color: transparent;z-index: 50;} .thumbnail span{ /*CSS for enlarged image*/ position: absolute;padding: 5px;left: -100px;border: 0px dashed gray; visibility: hidden;color: #FFFF00;text-decoration: none;z-index: 0;} .thumbnail span img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;} .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible;top: 0;left: 10px; /*position where enlarged image should offset horizontally */} </style> <body> <table> <tr> <td> <a class="thumbnail" style="cursor: move;"><img style="width: 141px; height: 141px;" src="images/klematis_small.jpg" border="0" /><span><img style="width: 450px; height: 450px;;" src="images/klematis_small.jpg" /></span></a> </td> <td> <a class="thumbnail" style="cursor: move;"><img style="width: 141px; height: 141px;" src="images/klematis4_small.jpg" border="0" /><span><img style="width: 450px; height: 450px;" src="images/klematis4_small.jpg" /></span></a> </td> </tr> </table> </body>
