Como sobrepor imagens

Quero sobrepor uma imagem com outra usando CSS. Um exemplo disso é a primeira imagem (o plano de fundo, se você preferir) será um link em miniatura de um produto, com o link abrindo uma caixa de luz / pop-up mostrando uma versão maior da imagem.

No topo desta imagem vinculada, eu gostaria que uma imagem de uma lupa mostrasse às pessoas que a imagem pode ser clicada para aumentá-la (aparentemente isso não é óbvio sem a lupa).

Acabei de fazer exatamente isso em um projeto. O lado HTML parecia um pouco com isso:

<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>

Então, 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;
}

Deixei grande parte da amostra no CSS para que você possa ver como eu decidi fazer o estilo. Note que diminui a opacidade para que você possa ver através da lupa.

Espero que isto ajude.

EDIT: Para esclarecer o seu exemplo - você poderia ignorar visibility:hidden;e matar a :hoverexecução, se quisesse, foi assim que eu fiz.

Uma técnica, sugerida por este artigo , seria fazer o seguinte:

<img style="background:url(thumbnail1.jpg)" src="magnifying_glass.png" />

Uma maneira simples de fazer isso com CSS apenas sem modificar o conteúdo com tags adicionais é mostrada aqui (com código e exemplo): http://soukie.net/2009/08/20/typography-and-css/#example

Isso funciona, desde que o elemento pai não esteja usando posicionamento estático. Simplesmente configurá-lo para o posicionamento relativo faz o truque. Além disso, o IE <8 não suporta o seletor : before ou o conteúdo .

Aqui está como eu fiz isso recentemente. Não é perfeito semanticamente, mas faz o trabalho.

<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>

Você pode conferir este tutorial: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

Nele, o escritor usa um elemento de espaço vazio para adicionar uma imagem de sobreposição. Você pode usar o jQuery para injetar os referidos elementos de extensão, se desejar manter seu código o mais limpo possível. Um exemplo também é dado no artigo acima mencionado.

Espero que isto ajude!

-Dave

Se você quer apenas o vidro de aumento ao passar o mouse, pode usar

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

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

Se você deseja que ele permaneça lá permanentemente, provavelmente deve incluí-lo no thumnail original ou adicioná-lo usando JavaScript, em vez de adicioná-lo ao HTML (isso é puro estilo e não deve estar no conteúdo).

Deixe-me saber se você deseja ajuda no lado do JavaScript.

No CSS3, você pode fazer o seguinte:

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

Retirado de Posso ter várias imagens de fundo usando CSS?

Tudo o que queremos é pai acima de filho. É assim que se faz.

Você colocou imgem span, conjunto z-index & positionpara ambos os elementos, e extra displayde span. Adicione o cursor para spanque você possa testá-lo e conseguir!

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 você use a <img>tag, que exibe uma imagem por si só, não será possível conseguir isso apenas com CSS puro. Você também precisará de DOIS elementos HTML - um para cada imagem. Isso ocorre porque a única maneira de fazer um elemento exibir uma imagem via CSS é com a background-imagepropriedade e cada elemento pode ter apenas uma imagem de plano de fundo. Quais são os dois elementos que você escolhe e como os posiciona depende de você. Existem várias maneiras de posicionar um elemento HTML acima de outro.

Aqui está uma boa técnica para exibir uma imagem de sobreposição centralizada com um plano de fundo semitransparente sobre um link de imagem:

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;
}

Aqui está uma técnica JQuery com plano de fundo 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();
});