Jak nakładać obrazy

129

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

html  css 
— Robin Barnes
źródło
7
Twoja wtyczka nie odpowiada na pytanie i chociaż jest nieco powiązana, nie jest tym, o co pytano.
— Bashevis

Odpowiedzi:

109

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.

— Tim Knight
źródło
1
Tak, myślałem, że prawdopodobnie będzie to rozwiązanie do pozycjonowania absolutnego. Powodem, dla którego to lubię, jest to, że główny obraz pozostaje obrazem, nie staje się obrazem tła.
— Robin Barnes
2
Tim K .: Twój kod wygląda dobrze, z wyjątkiem CSS. Silnik czyta CSS od prawej do lewej. Kiedy używasz „a.gallerypic”, najpierw wyszukuje „gallerypic”, a następnie sprawdza, czy „gallerypic” ma przodka „a”. Aby rozwiązać ten problem, po prostu zostaw „a” na zewnątrz, więc otrzymasz „.gallerypic”. Nie ma potrzeby poprzedzającego „a”.
— Martin Villa
1
Myślę, że jest jeden problem, który pozostaje nierozwiązany, a mianowicie, że jesteś zmuszony używać display: block (podczas gdy obrazy są domyślnie wbudowane).
— Peter Tseng
11

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 .

— enki
źródło
3
To faktycznie działa bardzo dobrze, wspaniale, że można to zrobić bez zmiany znaczników!
— axxxman,
3
Wklej kod z tego adresu URL, na wypadek gdyby kiedykolwiek się zepsuł. To powinna być akceptowana odpowiedź. Kod to: p {pozycja: względna; Blok wyświetlacza; } p: after {content: url (magnify.png); pozycja: bezwzględna; po prawej: 20px; top: 20px;
— Eric Steinborn
3

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>
— plntxt
źródło
3

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

1

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.

— Steve Perks
źródło
1

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;
}
— Pan Br
źródło
0

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.

— Vilx-
źródło
Jeśli używasz: before lub: after pseudo-selektory, możesz dodać html używając po prostu javacript. Ta odpowiedź stackoverflow.com/a/3098231/272208 pokazuje sposób bez drugiego elementu HTML dodanego do kodu źródłowego
— Jessica Brown
0

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;
}
— Coś świetnego
źródło
0

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();
});
— Durul Dalkanat
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.