画像オーバーレイ...画像の背景ではなく、画像の背景にのみ表示

Question

私は学生で、現在自分のウェブサイトの作成に忙しいですが、今私は、自分自身を理解する。 私のウェブサイトはプロのサイクリングに関するもので、その上にマウスを乗せてオーバーレイするチームのジャージーを持っています。私はこれを理解しました。しかし、今では、マウスでその上を移動すると、大きな正方形が画像をオーバーレイします（透明な背景を持つ正方形の画像なので）。そして、ジャージー上にオーバーレイがあり、写真の「背景」を超えてはいけません。

私があなたを助けてくれることを願っています！これを修正する必要があります！ ありがとうございます！

.container { 
 
    position: relative; 
 
    width: 25%; 
 
    height: auto; 
 
} 
 
.image { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #00b0f0; 
 
    opacity: 0.8; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
} 
 
.container:hover .overlay { 
 
    height: 100%; 
 
} 
 
.text { 
 
    white-space: nowrap; 
 
    color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<div class="container"> 
 
    <a href="AG2R.html"> 
 
    <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image"> 
 
    </a> 
 
    <div class="overlay"> 
 
    <div class="text">AG2R La Mondiale</div> 
 
    </div> 
 
</div>

Answer 1

私はコンセンサスがあなたがフィルターで行われ、純粋な黒画像を使用する場合に限り、このは、CSSと達成不可能であるということですrelevant Stack Overflow threadた - すべてのブラウザで互換性がありませんし、持っていませんあなたが実装したスライドの移行

Photoshopで別々のPNG画像として青色のオーバーレイを作成し、それらと一緒に移行した場合、どのように見えるかを説明することにしました。私はthe PNGを作成し、レイヤーを#00b0f0で埋めて80％の不透明度に設定し、それをクリッピングマスクとして使用しました。基本的にはあなたの.overlayがしようとしていたものです。

.container { 
 
    position: relative; 
 
    width: 25%; 
 
    height: auto; 
 
} 
 
.image { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: 0.8; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
} 
 
.overlay .image { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.container:hover .overlay { 
 
    height: 100%; 
 
} 
 
.text { 
 
    white-space: nowrap; 
 
    color: white; 
 
    text-shadow: #000 0 1px 1px; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}

<div class="container"> 
 
    <a href="AG2R.html"> 
 
    <img src="https://i.stack.imgur.com/7839q.png" alt="AG2R La Mondiale" title="AG2R La Mondiale" class="image"> 
 
    </a> 
 
    <div class="overlay"> 
 
    <img src="https://i.stack.imgur.com/DwIGH.png" alt="overlay" class="image" /> 
 
    <div class="text">AG2R La Mondiale</div> 
 
    </div> 
 
</div>