ホバーすると暗くなると同時にイメージが表示される要素があるのですが、
イメージも暗くなってしまいます。イメージを暗くさせずに表示させる方法はあるでしょうか?
イメージを前面に持ってくるなどのやり方があると推測しましたが、イメージがbackground-imageのため、できません。
html
1<div class='container'> 2 <img src='~~~'> 3</div>
以下が該当のscssです。
scss
1.container { 2 position: relative; 3 &:hover { 4 -webkit-filter: brightness(0.8); 5 -moz-filter: brightness(0.8); 6 -o-filter: brightness(0.8); 7 -ms-filter: brightness(0.8); 8 filter: brightness(0.8); 9 } 10 &:hover:after { 11 content: ""; 12 display: inline-block; 13 position: absolute; 14 width: 60px; 15 height: 60px; 16 top: 0; 17 bottom: 0; 18 left: 0; 19 right: 0; 20 margin: auto; 21 background-image: url(asset-path("dl-icon.png")); 22 background-size: contain; 23 background-position: center; 24 vertical-align: middle; 25 z-index: 2; 26 } 27}
ホバーすると要素containerが暗くなり、かつイメージはそのままの明るさで表示する方法はあるでしょうか?
なにかご教示いただけることがあれば、何卒よろしくお願いいたします。
回答4件
あなたの回答
tips
プレビュー