Как накладывать изображения

Я хочу наложить одно изображение на другое с помощью 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, чтобы вы могли видеть, как я решил создать стиль. Обратите внимание, что я уменьшил непрозрачность, чтобы вы могли видеть сквозь увеличительное стекло.

Надеюсь это поможет.

РЕДАКТИРОВАТЬ: Чтобы прояснить свой пример - вы можете игнорировать 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 не поддерживает селектор или контент : before .

Вот как я это сделал недавно. Не идеален семантически, но выполняет свою работу.

<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 для вставки указанных элементов диапазона, если хотите, чтобы ваш код был как можно более чистым. Пример также приводится в вышеупомянутой статье.

Надеюсь это поможет!

-Dave

Если вам нужно только увеличительное стекло при наведении, вы можете использовать

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