이미지를 오버레이하는 방법

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를 사용하여 해당 범위 요소를 삽입 할 수 있습니다. 전술 한 기사에도 예가 제시되어있다.

도움이 되었기를 바랍니다!

데이브

호버에서 돋보기 유리만을 원한다면 사용할 수 있습니다.

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

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

영구적으로 원한다면 원래 썸네일에 포함 시키거나 HTML에 추가하는 대신 JavaScript를 사용하여 추가해야합니다 (순전히 스타일이며 내용에 포함되어서는 안됩니다).

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 요소 위에 배치하는 방법에는 여러 가지가 있습니다.

다음은 이미지 링크 위에 반투명 배경으로 중앙에 놓인 오버레이 이미지를 표시하는 좋은 기술입니다.

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