画像をオーバーレイする方法

127

CSSを使用して、ある画像を別の画像にオーバーレイしたい。この例は、最初の画像（必要に応じて背景）が製品のサムネイルリンクで、リンクがライトボックス/ポップアップを開いて画像のより大きなバージョンを表示することです。

このリンクされた画像の上に、拡大鏡の画像が欲しいのですが、画像をクリックして拡大できることを人々に示したいと思います（どうやらこれは拡大鏡なしでは明白ではありません）。

html  css 
— ロビンバーンズ
ソース
7
あなたのプラグインは質問に答えません、そして多少関連していますが、求められたものではありません。
— Bashevis 2013

回答:

108

プロジェクトでこれとまったく同じことをやったところです。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実行を殺すことができました、これはちょうど私がやった方法です。

— ティム・ナイト
ソース
1
ええ、私はそれがおそらく絶対的なポジショニングソリューションになるだろうと思いました。これが好きな理由は、メイン画像は画像のままで、背景画像にならないためです。
— ロビンバーンズ
2
Tim K .: CSSを除いて、コードは正常に見えます。エンジンはCSSを右から左に読み取ります。「a.gallerypic」を使用すると、最初に「gallerypic」が検索され、次に「gallerypic」に「a」の祖先があるかどうかがチェックされます。これを解決するには、「a」を省略して、「。gallerypic」を取得します。先行する「a」は必要ありません。
— マーティンヴィラ
1
未解決の問題が1つあります。それは、display：blockを使用せざるを得ないことです（画像はデフォルトでインラインです）。
— Peter Tseng
11

追加のタグを使用してコンテンツを変更せずに、CSSでそれを行う簡単な方法を以下に示します（コードと例を含む）：http : //soukie.net/2009/08/20/typography-and-css/#example

これは、親要素が静的配置を使用していない限り機能します。それを相対配置に設定するだけでうまくいきます。また、IE <8は：beforeセレクターまたはコンテンツをサポートしていません。

— えんき
ソース
3
これは実際には非常にうまく機能し、マークアップをまったく変更せずにこれを行うことができるのは素晴らしいことです！
— axxxman 2012
3
ダウンした場合に備えて、このURLからコードを貼り付けてください。これは受け入れられる答えになるはずです。コードは次のとおりです。表示ブロック; } p：after {content：url（magnify.png）; 位置：絶対; 右：20px; top：20px;
— エリックスタインボーン2015
3

これが最近のやり方です。意味的には完璧ではありませんが、仕事は完了します。 

<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>
— plntxt
ソース
3

このチュートリアルをチェックしてください：http : //www.webdesignerwall.com/tutorials/css-decorative-gallery/

その中で、ライターは空のスパン要素を使用してオーバーレイ画像を追加します。コードを可能な限りクリーンにしたい場合は、jQueryを使用して前記スパン要素を挿入できます。前述の記事にも例が示されています。

お役に立てれば！

-デイブ

1

ホバー時の拡大鏡のみが必要な場合は、 

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

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

永続的に必要な場合は、元のサムネイルに含めるか、HTMLに追加するのではなくJavaScriptを使用して追加する必要があります（これは純粋にスタイルであり、コンテンツに含めることはできません）。

JavaScript側でサポートが必要な場合はお知らせください。

— スティーブ・パークス
ソース
1

必要なのは、子供より上の親です。これがあなたのやり方です。

あなたは置く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;
}
— Brさん
ソース
0

<img>単独で画像を表示するタグを使用しない限り、純粋なCSSだけでこれを実現することはできません。また、画像ごとに1つずつ、2つのHTML要素も必要です。これは、CSSを介して要素に画像を表示させる唯一の方法はbackground-imageプロパティを使用することであり、すべての要素は1つの背景画像しか持てないためです。どの2つの要素を選択し、どのように配置するかは自由です。HTML要素を別のHTML要素の上に配置する方法はたくさんあります。

— ヴィルクス
ソース
：beforeまたは：after疑似セレクターを使用する場合、javacriptだけを使用してhtmlを追加できます。この回答stackoverflow.com/a/3098231/272208は、2番目のhtml要素をソースコードに追加しない方法を示しています
— Jessica Brown
0

ここでは、画像リンクの上に半透明の背景で中央に配置されたオーバーレイ画像を表示するための良いテクニックがあります。

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;
}
— クラッカージャック
ソース
0

以下は、背景が半透明の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();
});
— ドゥルルダルカナット
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.