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

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

В дополнение к этому связанному изображению я хотел бы получить изображение увеличительного стекла, чтобы показать людям, что изображение можно щелкнуть, чтобы увеличить его (видимо, это не очевидно без увеличительного стекла).

Ответ 1

Я только что сделал это в проекте. Сторона 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, если хотите, это было именно так, как я это сделал.

Ответ 2

Один метод, предложенный этой статьей, должен был бы сделать это:

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

Ответ 3

Простой способ сделать это с помощью CSS только без изменения содержимого с дополнительными тегами показано здесь (с кодом и примером): http://soukie.net/2009/08/20/typography-and-css/#example

Это работает, пока родительский элемент не использует статическое позиционирование. Просто установка его на относительное позиционирование делает трюк. Кроме того, IE < 8 не поддерживает селектор : до или контент.

Ответ 4

Возможно, вы захотите проверить этот учебник: http://www.webdesignerwall.com/tutorials/css-decorative-gallery/

В нем автор использует пустой элемент span для добавления накладываемого изображения. Вы можете использовать jQuery для ввода указанных элементов span, если вы хотите, чтобы ваш код был как можно более чистым. Пример также приведен в вышеупомянутой статье.

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

-Dave

Ответ 5

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

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

Ответ 6

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

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

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

Если вы хотите его надолго, вы, вероятно, должны либо включить его в исходный thumnail, либо добавить его с помощью JavaScript, а не добавлять его в HTML (это чисто стиль и не должен быть в содержимом).

Сообщите мне, если вы хотите получить помощь со стороны JavaScript.

Ответ 7

В CSS3 вы можете сделать следующее:

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

Взял из Можно ли использовать несколько фоновых изображений с помощью CSS?

Ответ 8

Все, что мы хотим, это родительский элемент над дочерним. Вот как вы это делаете.

Поместите img в span, установите z-index & position для обоих элементов и добавьте display для span. Добавьте hover в 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;
}

Ответ 9

Если вы не используете тег <img>, который отображает изображение сам по себе, вы не сможете достичь этого только с помощью чистого CSS. Вам также понадобятся ДВУХ HTML-элементы - по одному для каждой картинки. Это связано с тем, что единственный способ заставить элемент отображать изображение через CSS - это свойство background-image, и каждый элемент может иметь только одно фоновое изображение. Какие два элемента вы выбираете и как вы их позиционируете, зависит от вас. Существует множество способов размещения одного элемента HTML над другим.

Ответ 10

Здесь хорошая техника для отображения оверлейного изображения, которое центрируется полупрозрачным фоном по ссылке изображения:

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

Ответ 11

Здесь JQuery Technique с полупрозрачным фоном.

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