Comment superposer des images

Je veux superposer une image avec une autre en utilisant CSS. Un exemple de ceci est la première image (l'arrière-plan si vous le souhaitez) sera un lien de vignette d'un produit, avec le lien ouvrant une lightbox / popup montrant une version plus grande de l'image.

En plus de cette image liée, je voudrais une image d'une loupe, pour montrer aux gens que l'image peut être cliquée pour l'agrandir (apparemment ce n'est pas évident sans la loupe).

J'ai juste fini de faire exactement cette chose dans un projet. Le côté HTML ressemblait un peu à ceci:

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

Puis en utilisant 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;
}

J'ai laissé une grande partie de l'échantillon là-dedans sur le CSS pour que vous puissiez voir comment j'ai décidé de faire le style. Notez que j'ai réduit l'opacité pour que vous puissiez voir à travers la loupe.

J'espère que cela t'aides.

EDIT: Pour clarifier votre exemple - vous pouvez ignorer visibility:hidden;et tuer l' :hoverexécution si vous le souhaitez, c'était juste la façon dont je l'ai fait.

Une technique, suggérée par cet article , serait de faire ceci:

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

Un moyen simple de faire cela avec CSS uniquement sans modifier le contenu avec des balises supplémentaires est montré ici (avec code et exemple): http://soukie.net/2009/08/20/typography-and-css/#example

Cela fonctionne, tant que l'élément parent n'utilise pas de positionnement statique. Le simple réglage du positionnement relatif fait l'affaire. De plus, IE <8 ne prend pas en charge le sélecteur ou le contenu : before .

Voici comment je l'ai fait récemment. Pas parfait sémantiquement, mais fait le travail.

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

Vous voudrez peut-être consulter ce tutoriel: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

Dans ce document, l'écrivain utilise un élément span vide pour ajouter une image superposée. Vous pouvez utiliser jQuery pour injecter lesdits éléments span, si vous souhaitez garder votre code aussi propre que possible. Un exemple est également donné dans l'article précité.

J'espère que cela t'aides!

-Dave

Si vous ne voulez que la loupe en vol stationnaire, vous pouvez utiliser

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

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

Si vous le souhaitez en permanence, vous devriez probablement l'inclure dans la vignette d'origine, ou l'ajouter en utilisant JavaScript plutôt que de l'ajouter au HTML (c'est purement style et ne devrait pas être dans le contenu).

Faites-moi savoir si vous avez besoin d'aide du côté JavaScript.

Dans CSS3, vous pouvez effectuer les opérations suivantes:

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

Tiré de Puis-je avoir plusieurs images d'arrière-plan en utilisant CSS?

Tout ce que nous voulons, c'est le parent au-dessus de l'enfant. Voici comment vous procédez.

Vous mettez imgdans span, ensemble z-index & positionpour les deux éléments, et extra displaypour la durée. Ajoutez le survol pour spanque vous puissiez le tester et vous l'avez!

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

À moins que vous n'utilisiez la <img>balise, qui affiche une image seule, vous ne pourrez pas y parvenir avec du CSS pur uniquement. Vous aurez également besoin de DEUX éléments HTML - un pour chaque image. En effet, la seule façon de faire en sorte qu'un élément affiche une image via CSS est d'utiliser la background-imagepropriété, et chaque élément ne peut avoir qu'une seule image d'arrière-plan. Les deux éléments que vous choisissez et la manière dont vous les positionnez dépend de vous. Il existe de nombreuses façons de positionner un élément HTML au-dessus d'un autre.

Voici une bonne technique pour afficher une image de superposition centrée avec un arrière-plan semi-transparent sur un lien d'image:

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

Voici une technique JQuery avec un fond semi-transparent.

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