web-dev-qa-db-ja.com

CSSで画像の上にオーバーレイを作成する方法は？

私はこのようなことを達成しようとしています：

this effect

画像にカーソルを合わせると、この暗い色にテキストとアイコンを付けます。

私はここで立ち往生しています。いくつかのチュートリアルを見つけましたが、このケースではうまくいきませんでした。また、別の問題-すべての画像の高さが異なります。幅は常に同じです。

この効果はどのように達成できますか？

htmlcssimagehoveropacity
52
user984621

この簡単なCSS/HTMLでこれを実現できます。

.image-container {
    position: relative;
    width: 200px;
    height: 300px;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}

HTML

<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>

デモ： http://jsfiddle.net/6Mt3Q/

UPD：これは、スタイリングを追加したニースの最終デモです。

.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
}
.image-container:hover .after {
    display: block;
    background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
    position: absolute;
    bottom: 0;
    font-family: Arial;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
}
.image-container .after .zoom {
    color: #DDD;
    font-size: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -19px;
    height: 50px;
    width: 45px;
    cursor: pointer;
}
.image-container .after .zoom:hover {
    color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom">
            <i class="fa fa-search"></i>
        </span>
    </div>
</div>
97
dfsq

このために擬似要素を使用し、ホバー上に画像を置くことができます。

.image {
  position: relative;
  height: 300px;
  width: 300px;
  background: url(http://lorempixel.com/300/300);
}
.image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.8s;
  opacity: 0;
  background: url(http://lorempixel.com/300/200);
  background-size: 100% 100%;
}
.image:hover:before {
  opacity: 0.8;
}
<div class="image"></div>
28
jbutler483

これには少し遅れましたが、このスレッドは、オーバーレイメソッドを検索する際の上位の結果としてGoogleに登場します。

単にbackground-blend-modeを使用できます

.foo {
    background-image: url(images/image1.png), url(images/image2.png);
    background-color: Violet;
    background-blend-mode: screen multiply;
}

これが行うことは、2番目の画像を取得し、乗算ブレンドモードを使用して背景色とブレンドし、その後、画面ブレンドモードを使用して最初の画像を2番目の画像と背景色とブレンドします。オーバーレイを実現するために使用できる16種類のブレンドモードがあります。

乗算、スクリーン、オーバーレイ、暗く、明るくする、色をかわす、色を焼く、ハードライト、ソフトライト、差、除外、色相、彩度、色、明度。

12
Emil Mladenov