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

Question

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

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

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

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

РЕДАКТИРОВАТЬ: Чтобы уточнить для вашего примера - вы можете игнорировать visibility:hidden; и убить выполнение :hover, если хотите, это был просто способ, которым я это сделал.

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

-Dave

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

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

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

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

Дайте мне знать, если вам нужна помощь на стороне JavaScript.

Answer 9

Вот техника 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();
});

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