CSS残りのページに黒いオーバーレイを置くためのソリューション - 別のイメージの上にイメージをオーバーレイしない

ユーザーがイメージを上に移動したときにイメージを強調したい。CSS残りのページに黒いオーバーレイを置くためのソリューション - 別のイメージの上にイメージをオーバーレイしない

これを行うには、他のすべてにオーバーレイを追加したい（または正直言って、イメージを含むすべての上にオーバーレイを配置し、イメージを明るくすることもできます）。

JSなしでこれを行うにはどうしますか？私はJSソリューションを利用することができればそれを利用することができてうれしいですが、これを行うことができるCSS専用のトリッキーがあるのだろうかと思っていました。

例HTMLは次のようになります：

<body> 
<div> 
<Other Elements /> 
<img src="...." /> 
</div> 
</body>

好ましくは、すべてのものは、タグを除いて暗くされるだろう。

編集：これは複製ではありません。

<div class="wrapper"> 
    <div class="other-content"> 
    </div> 
    <div class="popup"> 
    <img src="..."> 
    </div> 
</div>

あなたはあなたのイメージにオーバーレイのスタイルを疑似要素:beforeを使用することができます：あなたがそうのようなdivのコンテナにあなたの画像オーバーレイ画像をラップした場合にはOverlay Images

出典

2017-11-29 Andrew Alexander

あなたはページ全体のオーバーレイを作成し、そのようには1に、あなたがオーバーホバリングしている画像のzインデックスを変更することにより、これを行うことができますオーバーレイの上に座っています – A61NN5

この種のことはあなたを閉じることになります：https://jsfiddle.net/j9y6pyrq/1/画像が疑似要素を持つことができないということが最も難しいので、ラッパーは画像をラップする必要があります。また、ラッパーの上にマウスカーソルを移動すると、擬似要素が表示されます。これは要素の一部なので、実際には 'mouseout'状態はありません。これを純粋なCSSで行うことは不可能かもしれません。 – disinfor

これはかなり私が来た結論です。それはいいです、私はスクリプトを書くだけです。それはCSS3で実行可能なようなもののように思えました。 –

から非常に、非常に異なっています。

.popup { 

    img { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translateX(-50%) translateY(-50%); 
    } 

    &:before { 
     content: ''; 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     background-color: rgba(0,0,0,0.8); 
    } 
    }

ここでは例を参照してください。

https://codepen.io/dominicgan/pen/WXaXPy

出典

2017-11-29 02:05:11 dommmm

オーバーレイを表示させるために、画像の上にマウスを移動する場所はどこですか？ –

CSS残りのページに黒いオーバーレイを置くためのソリューション - 別のイメージの上にイメージをオーバーレイしない

答えて

関連する問題