オーバーレイ要素の代わりに疑似要素を使用することをお勧めします。囲まれた要素には疑似要素を追加できないため、要素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)からテキストを追加します。.imagedata-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;
}