Jak nakładać obrazy

Chcę nałożyć jeden obraz na inny za pomocą CSS. Przykładem tego jest pierwszy obraz (jeśli chcesz, tło) będzie linkiem do miniatury produktu, z linkiem otwierającym lightbox / popup pokazujący większą wersję obrazu.

Oprócz tego połączonego obrazu chciałbym otrzymać obraz lupy, aby pokazać ludziom, że można go kliknąć, aby go powiększyć (najwyraźniej nie jest to oczywiste bez lupy).

Właśnie skończyłem robić dokładnie to samo w projekcie. Strona HTML wyglądała trochę tak:

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

Następnie używając 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;
}

Zostawiłem dużo sampli w CSS, więc możesz zobaczyć, jak zdecydowałem się zrobić styl. Uwaga: zmniejszyłem krycie, abyś mógł widzieć przez szkło powiększające.

Mam nadzieję że to pomoże.

EDYCJA: Aby wyjaśnić na przykład - możesz zignorować visibility:hidden;i zabić :hoveregzekucję, jeśli chcesz, tak właśnie zrobiłem.

Jedną z technik sugerowanych w tym artykule byłoby zrobienie tego:

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

Prosty sposób na zrobienie tego tylko za pomocą CSS bez modyfikowania treści za pomocą dodatkowych tagów jest pokazany tutaj (z kodem i przykładem): http://soukie.net/2009/08/20/typography-and-css/#example

Działa to, o ile element nadrzędny nie korzysta z pozycjonowania statycznego. Wystarczy ustawić go na pozycjonowanie względne. Ponadto IE <8 nie obsługuje selektora : before ani zawartości .

Oto, jak ostatnio to zrobiłem. Nie jest doskonała semantycznie, ale wykonuje swoją pracę.

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

Możesz sprawdzić ten samouczek: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

W nim autor używa pustego elementu span, aby dodać nakładający się obraz. Możesz użyć jQuery do wstrzyknięcia wspomnianych elementów span, jeśli chcesz, aby kod był tak czysty, jak to tylko możliwe. Przykład jest również podany w wyżej wymienionym artykule.

Mam nadzieję że to pomoże!

-Dave

Jeśli chcesz, aby szkło powiększające było tylko po najechaniu kursorem, możesz użyć

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

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

Jeśli chcesz, aby był tam na stałe, prawdopodobnie powinieneś albo dołączyć go do oryginalnego thumnail, albo dodać go za pomocą JavaScript, zamiast dodawać go do HTML (jest to czysto stylowe i nie powinno być w treści).

Daj mi znać, jeśli potrzebujesz pomocy po stronie JavaScript.

W CSS3 możesz wykonać następujące czynności:

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

Zaczęto z Czy mogę mieć wiele obrazów tła za pomocą CSS?

Chcemy tylko rodzica nad dzieckiem. Tak to się robi.

Można umieścić imgna spanustawić z-index & positiondla obu elementów, a dodatkowo displaydla rozpiętości. Dodaj kursor do, spanaby móc go przetestować i gotowe!

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

Jeśli nie użyjesz <img>tagu, który wyświetla sam obraz, nie będziesz w stanie tego osiągnąć za pomocą samego CSS. Będziesz także potrzebować DWÓCH elementów HTML - po jednym dla każdego obrazu. Dzieje się tak, ponieważ jedynym sposobem, w jaki możesz sprawić, by element wyświetlał obraz za pomocą CSS, jest użycie background-imagewłaściwości, a każdy element może mieć tylko jeden obraz tła. To, które dwa elementy wybierzesz i jak je ustawisz, zależy od Ciebie. Istnieje wiele sposobów umieszczania jednego elementu HTML nad drugim.

Oto dobra technika wyświetlania obrazu nakładki, który jest wyśrodkowany z półprzezroczystym tłem nad linkiem do obrazu:

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

Oto technika JQuery z półprzezroczystym tłem.

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