Cómo superponer imágenes

Quiero superponer una imagen con otra usando CSS. Un ejemplo de esto es la primera imagen (el fondo si lo desea) será un enlace en miniatura de un producto, con el enlace que abre una caja de luz / ventana emergente que muestra una versión más grande de la imagen.

Además de esta imagen vinculada, me gustaría una imagen de una lupa, para mostrar a las personas que se puede hacer clic en la imagen para agrandarla (aparentemente esto no es obvio sin la lupa).

Acabo de terminar haciendo esto exactamente 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é una gran parte de la muestra allí en el CSS para que puedan ver cómo decidí hacer el estilo. Tenga en cuenta que bajé la opacidad para que pueda ver a través de la lupa.

Espero que esto ayude.

EDITAR: Para aclarar su ejemplo, puede ignorar visibility:hidden;y matar 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 simple de hacerlo 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 padre no esté utilizando posicionamiento estático. Simplemente establecerlo en un posicionamiento relativo es el truco. Además, IE <8 no admite el : antes del selector o el contenido .

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>

Es posible que desee consultar este tutorial: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

En él, el escritor utiliza un elemento span vacío para agregar una imagen superpuesta. Puede usar jQuery para inyectar dichos elementos span, si desea mantener su código lo más limpio posible. También se da un ejemplo en el artículo mencionado.

¡Espero que esto ayude!

-Dave

Si solo desea que la lupa se desplace, puede usar

a:hover img { cursor: url(glass.cur); }

http://www.javascriptkit.com/dhtmltutors/csscursors.shtml

Si lo quiere allí permanentemente, probablemente debería incluirlo en la miniatura original o agregarlo usando JavaScript en lugar de agregarlo al HTML (esto es puramente estilo y no debe estar en el contenido).

Avíseme si desea ayuda en el lado de JavaScript.

En CSS3, puede hacer lo siguiente:

.double-image {
    background-image: url(images/img1.png), url(images/img2.png);
}

Tomado de ¿Puedo tener múltiples imágenes de fondo usando CSS?

Todo lo que queremos es padre por encima de hijo. Así es como lo haces.

Pones imgen span, establece z-index & positionpara ambos elementos, y extra displaypara span. ¡Agrega el cursor para spanque puedas probarlo y lo tienes!

HTML:

<span><img src="/images/"></span>

CSS

span img {
    position:relative;
    z-index:-1;
}
span {
    position:relative;
    z-index:initial;
    display:inline-block;
}
span:hover {
    background-color:#000;
}

A menos que use la <img>etiqueta, que muestra una imagen por sí sola, no podrá lograr esto solo con CSS puro. También necesitará DOS elementos HTML, uno para cada imagen. Esto se debe a que la única forma en que puede hacer que un elemento muestre una imagen a través de CSS es con la background-imagepropiedad, y cada elemento solo puede tener una imagen de fondo. Depende de usted cuáles son los dos elementos que elige y cómo los coloca. Hay muchas formas de colocar un elemento HTML sobre otro.

Aquí hay una buena técnica para mostrar una imagen superpuesta centrada con un fondo semitransparente sobre un enlace de imagen:

HTML

<div class="image-container">
    <a class="link" href="#" >  
        <img class="image" src="/img/thumbnail.png"/>
        <span class="overlay-image"><img src="/img/overlay.png"></span>
    </a>    
</div>

CSS

div.image-container{
    position: relative;
}
a.link{
    text-decoration: none;  
    position: relative;
    display: block;
}

a.link span.overlay-image{
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    background-color: rgba(0,0,0,0.2); /* black background with 20% alpha */
}

a.link span.overlay-image:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;   
}

a.link:hover span.overlay-image img{
    display: inline-block;  
    vertical-align: middle;     
}

a.link:hover span.overlay-image{
    visibility: visible;
}

Aquí hay una técnica JQuery con fondo semitransparente.

HTML

<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <title>Image Gallery</title>
</head>
<body>
    <h1>Image Gallery</h1>

    <ul id="imageGallery">
        <li><a href="images/refferal_machine.png"><img src="images/refferal_machine.png" width="100" alt="Refferal Machine By Matthew Spiel"></a></li>
        <li><a href="images/space-juice.png"><img src="images/space-juice.png" width="100" alt="Space Juice by Mat Helme"></a></li>
        <li><a href="images/education.png"><img src="images/education.png" width="100" alt="Education by Chris Michel"></a></li>
        <li><a href="images/copy_mcrepeatsalot.png"><img src="images/copy_mcrepeatsalot.png" width="100" alt="Wanted: Copy McRepeatsalot by Chris Michel"></a></li>
        <li><a href="images/sebastian.png"><img src="images/sebastian.png" width="100" alt="Sebastian by Mat Helme"></a></li>
        <li><a href="images/skill-polish.png"><img src="images/skill-polish.png" width="100" alt="Skill Polish by Chris Michel"></a></li>
        <li><a href="images/chuck.png"><img src="images/chuck.png" width="100" alt="Chuck by Mat Helme"></a></li>
        <li><a href="images/library.png"><img src="images/library.png" width="100" alt="Library by Tyson Rosage"></a></li>
        <li><a href="images/boat.png"><img src="images/boat.png" width="100" alt="Boat by Griffin Moore"></a></li>
        <li><a href="images/illustrator_foundations.png"><img src="images/illustrator_foundations.png" width="100" alt="Illustrator Foundations by Matthew Spiel"></a></li>
        <li><a href="images/treehouse_shop.jpg"><img src="images/treehouse_shop.jpg" width="100" alt="Treehouse Shop by Eric Smith"></a></li>
    </ul>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

CSS

/** Start Coding Here **/
#overlay {
  background:rgba(0,0,0,0.7);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

#overlay img {
 margin-top: 10%; 
}

#overlay p {
 color:white; 
}

app.js

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");

// 1. Capture the click event on a link to an image
$("#imageGallery a").click(function(event){
  event.preventDefault();

  var imageLocation = $(this).attr("href");

  // 1.1 Show the overlay.
  $overlay.show();

  // 1.2 Update overlay with the image linked in the link
  $image.attr("src", imageLocation);

  // 1.3 Get child's alt attribute and set caption
  var captionText = $(this).children("img").attr("alt");
  $caption.text(captionText);


 // 2. Add overlay
 $("body").append($overlay);

    // 2.1 An image to overlay
    $overlay.append($image);

    // 2.2 A caption to overlay
    $overlay.append($caption);

});

//When overlay is clicked
$overlay.click(function(){
  //Hide the overlay
  $overlay.hide();
});