So überlagern Sie Bilder

Ich möchte ein Bild mit CSS mit einem anderen überlagern. Ein Beispiel hierfür ist, dass das erste Bild (der Hintergrund, wenn Sie möchten) ein Miniaturbild-Link eines Produkts ist, wobei der Link einen Leuchtkasten / ein Popup öffnet und eine größere Version des Bildes zeigt.

Über diesem verknüpften Bild möchte ich ein Bild einer Lupe, um den Menschen zu zeigen, dass auf das Bild geklickt werden kann, um es zu vergrößern (anscheinend ist dies ohne die Lupe nicht offensichtlich).

Ich habe gerade genau das in einem Projekt getan. Die HTML-Seite sah ein bisschen so aus:

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

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

Ich habe einen Großteil des Beispiels im CSS belassen, damit Sie sehen können, wie ich mich für den Stil entschieden habe. Hinweis Ich habe die Deckkraft verringert, damit Sie durch die Lupe sehen können.

Hoffe das hilft.

EDIT: Um Ihr Beispiel zu verdeutlichen: Sie könnten das ignorieren visibility:hidden;und die :hoverAusführung beenden, wenn Sie möchten. So habe ich es gemacht.

Eine in diesem Artikel vorgeschlagene Technik wäre, dies zu tun:

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

Eine einfache Möglichkeit, dies nur mit CSS zu tun, ohne den Inhalt mit zusätzlichen Tags zu ändern, wird hier gezeigt (mit Code und Beispiel): http://soukie.net/2009/08/20/typography-and-css/#example

Dies funktioniert, solange das übergeordnete Element keine statische Positionierung verwendet. Das einfache Einstellen der relativen Positionierung reicht aus. Außerdem unterstützt IE <8 das : before- Selektor oder den Inhalt nicht .

Hier ist, wie ich es kürzlich gemacht habe. Semantisch nicht perfekt, erledigt aber die Arbeit.

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

Vielleicht möchten Sie dieses Tutorial lesen: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

Darin verwendet der Writer ein leeres Span-Element, um ein überlagerndes Bild hinzuzufügen. Sie können jQuery verwenden, um diese Span-Elemente einzufügen, wenn Sie Ihren Code so sauber wie möglich halten möchten. Ein Beispiel ist auch in dem oben genannten Artikel angegeben.

Hoffe das hilft!

-Dave

Wenn Sie nur die Lupe auf Schwebeflug haben möchten, können Sie verwenden

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

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

Wenn Sie es dauerhaft dort haben möchten, sollten Sie es wahrscheinlich entweder in der ursprünglichen Thumnail enthalten haben oder es mit JavaScript hinzufügen, anstatt es dem HTML-Code hinzuzufügen (dies ist rein stilvoll und sollte nicht im Inhalt enthalten sein).

Lassen Sie mich wissen, wenn Sie Hilfe auf der JavaScript-Seite benötigen.

In CSS3 können Sie Folgendes tun:

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

Entnommen aus Kann ich mit CSS mehrere Hintergrundbilder haben?

Wir wollen nur Eltern über Kind. Das ist wie man es macht.

Sie setzen imgin span, setzen z-index & positionfür beide Elemente und extra displayfür span. Fügen Sie Hover hinzu, spandamit Sie es testen können und Sie es haben!

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

Wenn Sie nicht das <img>Tag verwenden, das ein Bild selbst anzeigt, können Sie dies nicht mit reinem CSS allein erreichen. Sie benötigen außerdem ZWEI HTML-Elemente - eines für jedes Bild. Dies liegt daran, dass ein Element ein Bild über CSS nur mit der background-imageEigenschaft anzeigen kann und jedes Element nur ein Hintergrundbild haben kann. Welche zwei Elemente Sie auswählen und wie Sie sie positionieren, liegt bei Ihnen. Es gibt viele Möglichkeiten, wie Sie ein HTML-Element über einem anderen positionieren können.

Hier ist eine gute Technik, um ein Überlagerungsbild anzuzeigen, das mit einem halbtransparenten Hintergrund über einem Bildlink zentriert ist:

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

Hier ist eine JQuery-Technik mit halbtransparentem Hintergrund.

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