Як накладати зображення

Я хочу накласти одне зображення на інше за допомогою CSS. Прикладом цього є перше зображення (фоном, якщо вам подобається), є посилання на ескіз продукту, при цьому посилання відкриває лайтбокс / спливаюче вікно, де відображається більша версія зображення.

Зверху на це пов’язане зображення я хотів би зображення лупи, щоб показати людям, що зображення можна натискати, щоб збільшити його (мабуть, це не очевидно без лупи).

Я щойно закінчив робити цю справу в проекті. Сторона HTML виглядала приблизно так:

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

Потім за допомогою 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;
}

Я залишив багато зразка там на CSS, щоб ви могли бачити, як я вирішив зробити стиль. Примітка: Я знизив непрозорість, щоб ви могли бачити крізь збільшувальне скло.

Сподіваюся, це допомагає.

EDIT: Щоб уточнити для вашого прикладу - ви могли проігнорувати visibility:hidden;і вбити :hoverстрату, якщо хочете, це був саме такий спосіб, як я це зробив.

Однією з методик, запропонованої цією статтею , було б це зробити:

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

Тут показаний простий спосіб зробити це лише за допомогою CSS, не змінюючи вміст додатковими тегами: з кодом та прикладом: http://soukie.net/2009/08/20/typography-and-css/#example

Це працює, доки батьківський елемент не використовує статичне позиціонування. Просто встановлення його на відносне позиціонування робить трюк. Також IE <8 не підтримує : перед вибором або вмістом .

Ось як я це зробив нещодавно. Не ідеально семантично, але виконує роботу.

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

Ви можете переглянути цей підручник: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

У ньому письменник використовує порожній прольотний елемент, щоб додати зображення, що накладається. Ви можете використовувати jQuery для введення цих елементів, якщо ви хочете, щоб ваш код був максимально чистим. Приклад також наведений у вищезгаданій статті.

Сподіваюся, це допомагає!

-Давіть

Якщо ви хочете лише лупу на наведення курсора, ви можете використовувати

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

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

Якщо ви хочете його там постійно, вам, мабуть, слід або включити його в оригінальний ескіз, або додати його за допомогою JavaScript, а не додавати його в HTML (це суто стиль і не повинно бути у вмісті).

Повідомте мене, якщо вам потрібна допомога на стороні JavaScript.

У CSS3 ви можете зробити наступне:

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

Взяв із Чи можу я створити кілька фонових зображень за допомогою CSS?

Все, що ми хочемо, це батьки, які перебувають над дитиною Ось як ви це робите.

Ви кладете imgв span, встановіть z-index & positionдля обох елементів, а також додаткові displayдля прольоту. Додайте курсор, щоб spanви могли його протестувати, і ви його отримали!

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

Якщо ви не використовуєте <img>тег, який відображає зображення сам по собі, ви не зможете досягти цього лише одним чистим CSS. Також вам знадобляться ДВА HTML-елемента - по одному для кожної картини. Це тому, що єдиний спосіб ви можете зробити елемент відображати зображення за допомогою CSS - це background-imageвластивість, і кожен елемент може мати лише одне фонове зображення. Які два елементи ви обираєте і як ви їх розташуєте, залежить від вас. Існує багато способів, як можна розташувати один елемент HTML над іншим.

Ось хороша техніка для відображення накладеного зображення, в центрі якого є напівпрозорим фоном через посилання на зображення:

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

Ось техніка JQuery з напівпрозорим фоном.

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