tengo dos imágenes, y al pasar por encima de cualquiera de las dos, esta muestra una ampliación de la misma.
el problema lo tengo a la hora de centrarlas, que el punto de origen me lo coge en la imagen por la cual paso el puntero, y me gustaría que la aparición de dicha imagen fuera en mitad de la pantalla por ejemplo.
css q uso:
Código HTML:
.thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; top:50%; left:50%; margin-left:-300px; margin-top:-150px; visibility: hidden; color: #FFFF00; text-decoration: none; } .thumbnail span img{ border-width: 0; padding: 2px; } .thumbnail:hover span{ visibility: visible; position: absolute; top:50%; left:50%; margin-left:-300px; margin-top:-150px; }
Código HTML:
<a class="thumbnail" href="#thumb"><img src="../img/imagen1.jpg" border="0" /><span><img src="../img/g_imagen1.jpg" /><br /></span></a> <a class="thumbnail" href="#thumb"><img src="../img/imagen2.jpg"border="0" /><span><img src="../img/g_imagen2.jpg" /><br /></span></a>
Gracias de antemano
Saludos