it-swarm.com.de

Wie man Bilder überlagert

Ich möchte mit CSS ein Bild mit einem anderen überlagern. Ein Beispiel hierfür ist das erste Bild (der Hintergrund, wenn Sie möchten), das ein Miniatur-Link eines Produkts ist, wobei der Link eine Lightbox/ein Popup mit einer größeren Version des Bildes öffnet.

Oben auf 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).

125
Robin Barnes

Genau das habe ich gerade in einem Projekt gemacht. Die HTML-Seite sah ungefähr 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 Samples dort 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.

BEARBEITEN: Zur Verdeutlichung Ihres Beispiels: Sie können den visibility:hidden; Ignorieren und die :hover - Ausführung beenden, wenn Sie möchten. Dies war genau meine Vorgehensweise.

107
Tim Knight

Eine von dieser Artikel vorgeschlagene Technik wäre:

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

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/ #Beispiel

Dies funktioniert, solange das übergeordnete Element keine statische Positionierung verwendet. Es reicht aus, es einfach auf relative Position zu setzen. IE <8 unterstützt nicht den : vor Selektor oder Inhalt .

11
enki

Hier ist, wie ich es vor kurzem gemacht habe. Nicht perfekt semantisch, aber erledigt 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>
3
plntxt

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

Darin verwendet der Schreiber ein leeres span-Element, um ein überlagertes Bild hinzuzufügen. Sie können jQuery verwenden, um die Span-Elemente einzufügen, wenn Sie Ihren Code so sauber wie möglich halten möchten. Ein Beispiel ist auch in dem oben erwähnten Artikel angegeben.

Hoffe das hilft!

-Dave

3
Dave

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

Sie setzen img in span, setzen z-index & position für beide Elemente und extra display für span. Fügen Sie Hover zu span hinzu, damit 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;
}
1
Mr Br

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?

1

Wenn Sie nur das Vergrößerungsglas auf dem Schwebeflug haben möchten, können Sie es 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 im ursprünglichen Thumnail haben oder es mit JavaScript hinzufügen, anstatt es dem HTML-Code hinzuzufügen (dies ist ein reiner Stil und sollte nicht im Inhalt enthalten sein).

Lassen Sie mich wissen, wenn Sie Hilfe auf der JavaScript-Seite möchten.

1
Steve Perks

Hier ist eine gute Technik, um ein Overlay-Bild 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;
}
0
Crackerjack

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

0
Vilx-

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