Come sovrapporre immagini

Voglio sovrapporre un'immagine a un'altra usando CSS. Un esempio di ciò è la prima immagine (lo sfondo, se lo desideri) sarà un collegamento in miniatura di un prodotto, con il collegamento che apre un lightbox / popup che mostra una versione più grande dell'immagine.

In cima a questa immagine collegata vorrei un'immagine di una lente d'ingrandimento, per mostrare alle persone che l'immagine può essere cliccata per ingrandirla (apparentemente questo non è ovvio senza la lente d'ingrandimento).

Ho appena finito di fare esattamente questa cosa in un progetto. Il lato HTML sembrava un po 'così:

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

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

Ho lasciato molto del campione lì dentro sul CSS in modo da poter vedere come ho deciso di fare lo stile. Nota ho abbassato l'opacità in modo da poter vedere attraverso la lente d'ingrandimento.

Spero che questo ti aiuti.

EDIT: Per chiarire il tuo esempio, potresti ignorare visibility:hidden;e uccidere l' :hoveresecuzione se lo desideri, questo era proprio il modo in cui l'ho fatto.

Una tecnica, suggerita da questo articolo , sarebbe quella di fare questo:

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

Un modo semplice per farlo solo con CSS senza modificare il contenuto con tag aggiuntivi è mostrato qui (con codice ed esempio): http://soukie.net/2009/08/20/typography-and-css/#example

Funziona, purché l'elemento genitore non stia utilizzando il posizionamento statico. Semplicemente impostandolo sul posizionamento relativo fa il trucco. Inoltre, IE <8 non supporta il selettore o il contenuto : before .

Ecco come l'ho fatto di recente. Semanticamente non perfetto, ma fa il lavoro.

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

Potresti voler dare un'occhiata a questo tutorial: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

In esso lo scrittore utilizza un elemento span vuoto per aggiungere un'immagine sovrapposta. Puoi usare jQuery per iniettare detti elementi span, se desideri mantenere il codice il più pulito possibile. Un esempio è riportato anche nel suddetto articolo.

Spero che questo ti aiuti!

-Dave

Se vuoi solo il vetro ingranditore al passaggio del mouse, puoi usarlo

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

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

Se lo vuoi permanentemente lì, probabilmente dovresti averlo incluso nel thumnail originale o aggiungerlo usando JavaScript piuttosto che aggiungerlo all'HTML (questo è puramente stile e non dovrebbe essere nel contenuto).

Fammi sapere se vuoi aiuto sul lato JavaScript.

In CSS3, puoi fare quanto segue:

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

Tratto da Posso avere più immagini di sfondo usando CSS?

Tutto ciò che vogliamo è genitore sopra figlio. Questo è come lo fai.

Metti imgin span, set z-index & positionper entrambi gli elementi ed extra displayper span. Aggiungi hover a in spanmodo da poterlo testare e hai capito!

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 meno che tu non usi il <img>tag, che mostra un'immagine da solo, non sarai in grado di farlo solo con CSS puro. Avrai anche bisogno di DUE elementi HTML, uno per ogni immagine. Questo perché l'unico modo in cui è possibile fare in modo che un elemento visualizzi un'immagine tramite CSS è con la background-imageproprietà e ogni elemento può avere solo un'immagine di sfondo. Quali due elementi scegli e come posizionarli dipende da te. Esistono molti modi per posizionare un elemento HTML sopra un altro.

Ecco una buona tecnica per visualizzare un'immagine sovrapposta centrata con uno sfondo semitrasparente su un collegamento immagine:

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

Ecco una tecnica JQuery con sfondo semi-trasparente.

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