Hola,
Tengo esta galería con css
http://www.ritmolatinocolumbus.com/fotos-alacranes.html
Al pasar el ratón sobre la imagen pequeña, aparece la imagen ampliada a la derecha.
Se ve bien en resolución de 1024 x 768... pero si la resolución disminuye entonces la imagen grande se sube mucho y si la resolución aumenta (por ej. 1280 x 1024) entonces la imagen grande se baja mucho.
En ambos casos me daña el diseño.
Este es el cóodigo css:
Cita: .thumbnail img{
border: 1px solid white;
margin: 0 1px 1px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid white;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#666666;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 43%;
left: 43%; /*position where enlarged image should offset horizontally */
z-index: 50;
}
La ubicación de la imagen la intente con valores absolutos y el resultado es peor... así que lo dejé con porcentajes: top: 43% y left: 43%... pero de todas formas tengo el problema que les menciono.
Así se ve en 1280 x 1024
Como ven, la imagen grande se monta sobre las pequeñas que están abajo y deja un espacio no deseado en la parte de arriba.