Cómo superponer imágenes
Quiero superponer una imagen con otra usando CSS. Un ejemplo de esto es que la primera imagen (el fondo, si lo desea) será un enlace en miniatura de un producto, y el enlace abrirá una caja de luz/ventana emergente que mostrará una versión más grande de la imagen.
Además de esta imagen vinculada, me gustaría ver una imagen de una lupa para mostrarle a la gente que se puede hacer clic en la imagen para ampliarla (aparentemente esto no es obvio sin la lupa).
Acabo de terminar de hacer exactamente esto en un proyecto. El lado HTML se parecía un poco a esto:
<a href="[fullsize]" class="gallerypic" title="">
<img src="[thumbnail pic]" height="90" width="140" alt="[Gallery Photo]" class="pic" />
<span class="zoom-icon">
<img src="/images/misc/zoom.gif" width="32" height="32" alt="Zoom">
</span>
</a>
Luego usando CSS:
a.gallerypic{
width:140px;
text-decoration:none;
position:relative;
display:block;
border:1px solid #666;
padding:3px;
margin-right:5px;
float:left;
}
a.gallerypic span.zoom-icon{
visibility:hidden;
position:absolute;
left:40%;
top:35%;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
a.gallerypic:hover span.zoom-icon{
visibility:visible;
}
Dejé gran parte de la muestra en el CSS para que puedas ver cómo decidí hacer el estilo. Tenga en cuenta que bajé la opacidad para que pudiera ver a través de la lupa.
EDITAR: Para aclarar su ejemplo, puede ignorar visibility:hidden;y finalizar la :hoverejecución si lo desea, así fue como lo hice.
Una técnica, sugerida por este artículo , sería hacer esto:
<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />
Aquí se muestra una forma sencilla de hacerlo solo con CSS sin modificar el contenido con etiquetas adicionales (con código y ejemplo): http://soukie.net/2009/08/20/typography-and-css/#example
Esto funciona, siempre y cuando el elemento principal no utilice posicionamiento estático. Simplemente configurarlo en posición relativa es suficiente. Además, IE <8 no admite el selector o contenido :before .
Editar: el enlace anterior ya no funciona, pero es visible en WayBack Machine: https://web.archive.org/web/20120213121217/https://soukie.net/2009/08/20/typography-and-css/
Así es como lo hice recientemente. No es perfecto semánticamente, pero hace el trabajo.
<div class="container" style="position: relative">
<img style="z-index: 32; left: 8px; position: relative;" alt="bottom image" src="images/bottom-image.jpg">
<div style="z-index: 100; left: 72px; position: absolute; top: 39px">
<img alt="top image" src="images/top-image.jpg"></div></div>
Si solo desea que la lupa esté suspendida, puede usar
a:hover img { cursor: url(glass.cur); }
http://www.javascriptkit.com/dhtmltutors/csscursors.shtml
Si lo desea allí de forma permanente, probablemente debería incluirlo en la miniatura original o agregarlo usando JavaScript en lugar de agregarlo al HTML (esto es puramente estilo y no debería estar en el contenido).
Déjame saber si quieres ayuda en el lado de JavaScript.
