CSSのみの画像ホバー上の黒い透明オーバーレイ？

CSSだけでマウスを画像の上に置くと、画像に透明な黒いオーバーレイを追加しようとしています。これは可能ですか？私はこれを試しました：

http://jsfiddle.net/Zf5am/565/

しかし、divを表示できません。

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

overlay要素の代わりに疑似要素を使用することをお勧めします。囲まれたimg要素に疑似要素を追加することはできないため、img要素をラップする必要があります。

ここでライブの例 -テキスト付きの例

<div class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

CSS については、要素にオプションの寸法を設定し.image、相対的に配置します。レスポンシブな画像を目指している場合は、寸法を省略しても問題ありません（例）。img要素自体ではなく、親要素上に寸法を配置する必要があることに注意してください。。を。

.image {
    position: relative;
    width: 400px;
    height: 400px;
}

子img要素に100%親の幅を与え、追加しますvertical-align:top指定ししてデフォルトのベースライン配置の問題を修正します。

.image img {
    width: 100%;
    vertical-align: top;
}

擬似要素については、コンテンツの値を設定し、.image要素に対して絶対的に配置します。の幅/高さは100%、これがさまざまなimg寸法で機能することを保証します。要素を遷移させたい場合は、不透明度を0、遷移のプロパティ/値を追加します。

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

1遷移を容易にするために、疑似要素の上にホバーするときに不透明度を使用します。

.image:hover:after {
    opacity: 1;
}

ここで結果を終了

ホバー時にテキストを追加する場合：

最も簡単な方法としては、テキストを疑似要素のcontent値として追加するだけです：

ここに例

.image:after {
    content: 'Here is some text..';
    color: #fff;

    /* Other styling.. */
}

ほとんどの場合それでうまくいくはずです。ただし、複数のimg要素がある場合、ホバー時に同じテキストを表示したくない場合があります。したがって、data-*属性にテキストを設定して、すべてのimg要素に一意のテキストを設定できます。

ここに例

.image:after {
    content: attr(data-content);
    color: #fff;
}

content値attr(data-content)、擬似要素からテキストを追加する.image要素のdata-content属性：

<div data-content="Text added on hover" class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

スタイルを追加して、次のようなことを行うことができます。

ここに例

上記の例では、:after疑似要素は黒いオーバーレイとして機能し、:before疑似要素はキャプション/テキストです。要素は互いに独立しているため、より最適な配置のために個別のスタイルを使用できます。

.image:after, .image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:after {
    content: '\A';
    width: 100%; height:100%;
    top: 0; left:0;
    background:rgba(0,0,0,0.6);
}
.image:before {
    content: attr(data-content);
    width: 100%;
    color: #fff;
    z-index: 1;
    bottom: 0;
    padding: 4px 10px;
    text-align: center;
    background: #f00;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
    opacity: 1;
}

CSS3フィルター

この機能はWebkitでのみ実装されており、ブラウザの互換性はありませんが、以下をご覧ください。

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

JSFiddleデモ

参考文献

• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• http://www.html5rocks.com/en/tutorials/filters/understanding-css/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• http://davidwalsh.name/css-filters
• http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

SOに関する同様のトピック

• CSSで画像の明るさを下げる方法
• HTML / CSSで画像をグレースケールに変換する
• CSS3フィルターブラーで定義されたエッジ

あなたは近くにいた。これは動作します：

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

あなたは:hoverオンの画像を入れ、.overlayカバーを追加right:0;して画像全体を作る必要がありました。bottom:0ます。

jsfiddle：http ://jsfiddle.net/Zf5am/569/

以下は、追加のオーバーレイdivの代わりに、画像divで：afterを使用する良い方法です：http : //jsfiddle.net/Zf5am/576/

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}

.overlay高さまたは幅がなく、コンテンツがなかったため、にカーソルを合わせることができませんdisplay:none。

代わりに、divに同じサイズと位置を指定し.image、RGBAホバー時に値を変更しました。

http://jsfiddle.net/Zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }

これは、画像の不透明度を操作し、画像の背景色を黒に設定することで実現できます。画像を透明にすると、暗くなります。

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div> 

CSS：

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

他のブラウザでもこれを機能させるには、ブラウザ固有の不透明度も設定する必要がある場合があります。

画像のサイズのオーバーレイdivにmin-heightとmin-widthを与え、ホバーの背景色を変更します

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}

ここで私がやったことを見てください：http : //jsfiddle.net/dyarbrough93/c8wEC/

まず、オーバーレイのサイズを設定することはありません。つまり、最初はオーバーレイが表示されていませんでした。次に、画像にカーソルを合わせたときにオーバーレイのz-indexを変更することをお勧めします。オーバーレイの不透明度/色をニーズに合わせて変更します。

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}