質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

1941閲覧

ホバー時に表示させる画像を前面に持ってきたい

s_diff

総合スコア107

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/06 08:00

編集2018/11/06 09:26

ホバーすると暗くなると同時にイメージが表示される要素があるのですが、
イメージも暗くなってしまいます。イメージを暗くさせずに表示させる方法はあるでしょうか?
イメージを前面に持ってくるなどのやり方があると推測しましたが、イメージが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が暗くなり、かつイメージはそのままの明るさで表示する方法はあるでしょうか?

なにかご教示いただけることがあれば、何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/11/06 08:10

これはSCSSですかね。コンパイルする必要があるので、できればコンパイル後にできあがったCSSもご提示いただきたく。
kei344

2018/11/06 08:10

提示されているものはCSSではなくSCSSかSASSのようなものでは?
s_diff

2018/11/06 08:43

すいません、SCSSでしたw
kei344

2018/11/06 08:51

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文および質問タグを編集することをお勧めします。
s_diff

2018/11/06 08:54

わかりました。ありがとうございます。
guest

回答4

0

回答依頼いただいたので下記ページを参考にしてやってみました。
https://kuroeveryday.blogspot.com/2017/04/blur-effects-to-background.html

SCSS

1.container { 2 position: relative; 3  // before 4 z-index: 0; 5 6 // 色の変化確認用に追加 7 width: 100vw; 8 height: 100vh; 9 background-color: yellow; 10 11 // .containerの内部要素に影響しないように擬似要素を使用 12 &:hover::before { 13 content: ''; 14 position: absolute; 15 // .containerの背景を継承 16 background: inherit; 17 top: 0; 18 bottom: 0; 19 left: 0; 20 right: 0; 21 22 // position: absolute;の影響で最前面に来てるので、上下関係を調整 23 z-index: -1; 24 25 -webkit-filter: brightness(0.8); 26 -moz-filter: brightness(0.8); 27 -o-filter: brightness(0.8); 28 -ms-filter: brightness(0.8); 29 filter: brightness(0.8); 30 } 31 32  // 内側の画像 33 &:hover::after { 34 content: ""; 35 display: inline-block; 36 position: absolute; 37 top: 0; 38 bottom: 0; 39 left: 0; 40 right: 0; 41 margin: auto; 42 // background-image: url(asset-path("dl-icon.png")); 43 // background-size: contain; 44 // background-position: center; 45 vertical-align: middle; 46 z-index: 2; 47 48 // filter確認用にサイズ調整して、画像ではなく背景色を使用 49 width: 50%; 50 height: 50%; 51 background-color: white; 52 } 53}

投稿2018/11/06 09:36

dice142

総合スコア5158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s_diff

2018/11/06 10:01 編集

わざわざありがとうございます。 ご指摘の通りやってみると、クラスcontainerのdiv要素は暗くなり、明るさがそのままのイメージが表示できました。 ただ、クラスcontainerのdiv要素内にあるimgタグのイメージが暗くなりません。これもホバー時に一緒に暗くしたいのですが、可能でしょうか?
dice142

2018/11/06 10:14

可能ですね。
guest

0

力技

scss

1&:hover:after { 2 -webkit-filter: brightness(1.25); 3 -moz-filter: brightness(1.25); 4 -o-filter: brightness(1.25); 5 -ms-filter: brightness(1.25); 6 filter: brightness(1.25); 7}

投稿2018/11/06 08:12

編集2018/11/06 08:21
macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s_diff

2018/11/06 08:47

背景は暗くしたいのですが、ご指摘の通りやってみたところ明るくなってしまいます。
s_diff

2018/11/06 08:51

間違えました。申し訳ありません。 ご指摘のcssを試したところ、変化がありませんでした。 以下のように記述しました。 &:hover:after { content: ""; display: inline-block; position: absolute; width: 60px; height: 60px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-image: url(asset-path("dl-icon.png")); background-size: contain; background-position: center; vertical-align: middle; z-index: 2; -webkit-filter: brightness(1.25); -moz-filter: brightness(1.25); -o-filter: brightness(1.25); -ms-filter: brightness(1.25); filter: brightness(1.25); }
guest

0

自己解決

scss

1 2.container { 3 position: relative; 4 5 &:hover::before { 6 content: ''; 7 position: absolute; 8 top: 0; 9 bottom: 0; 10 left: 0; 11 right: 0; 12 z-index: 1; 13 background-color: #63636394; 14 width: 100%; 15 height: 100%; 16 } 17 &:hover::after { 18 content: ""; 19 display: inline-block; 20 position: absolute; 21 top: 0; 22 bottom: 0; 23 left: 0; 24 right: 0; 25 margin: auto; 26 background-image: url(asset-path("dl-icon.png")); 27 background-size: contain; 28 background-position: center; 29 vertical-align: middle; 30 z-index: 2; 31 width: 70px; 32 height: 70px; 33 34 }

皆さんのご意見を参考にして上記のようなscssにすることで、ホバーしたときにcontainerを暗くさせ、かつホバー時に暗くならないイメージを表示させることができました。
大変助かりました。ありがとうございました。

投稿2018/11/16 02:23

s_diff

総合スコア107

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

filterをかけたらむしろ画像だけが影響を受けるので不要では?

CSS

1.container:hover { 2 background-color: rgba(0, 0, 0, 0.2); 3}

投稿2018/11/06 08:26

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s_diff

2018/11/06 08:58

ご回答ありがとうございます。 ご指摘の方法をためしてみましたが、ホバーしてもクラスcontainerの要素が暗くなりませんでした。 ホバーすると要素自体は暗くなり、かつホバー時に表示されるイメージは暗くならない方法はあるでしょうか?
x_x

2018/11/06 09:00

HTMLもほかのCSSも提示されていない以上、こちらにはわかりません。 もともとの色が暗い?とか
s_diff

2018/11/06 09:24

すいません、HTMLを記述する必要がありました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問