「バナー」のマウスオーバー時のマスクを解除したい

0
いいねをした人: 居ません
  • このトピックには2件の返信、2人の参加者があり、最後にshoneにより1年、 6ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #121532
    shone
    参加者
    47

    【お使いの Snow Monkey のバージョン】20.0.1
    【お使いの Snow Monkey Blocks のバージョン】 19.0.1
    【お使いの Snow Monkey Editor のバージョン】9.2.0
    【お使いのブラウザ】chtome
    【当該サイトのURL】

     

    いつも大変んお世話になっております。

    表題の件につきまして、「バナー」のマウスオーバー時の挙動を変更したいと考えています。

     

    デフォルトではバナーにマウスオーバーした際、画像が暗くなると思うのですが、これを解除し、かつ設定しているマスクも解除し画像本来の明るさになるよう設定したいです。

    具体的には下記サイトの「呼吸」「感覚」…の部分のようなイメージです。

     

     

    マウスオーバー時にマスクを解除するので:hoverで

    .smb-items__banner:hover {
    --smb-items--banner--mask-color: initial !important;
    --smb-items--banner--mask-opacity: initial !important;
    }

     

    のような感じでいけるかなと思ったのですが、上では自分で設定したマスク部分は解除されているようなのですが、デフォルトで設定されている暗くなる挙動?が解除できず…一瞬明るくなっても結果的にはデフォルトの暗くなる仕様が優先されているようで、暗くなってしまいました。

    デフォルトのマウスオーバー時の仕様も解除したかったのですが、どのように指定されているのかもわからなかった(見つけられなかった)ため質問させていただきました。

     

    マウスオーバー時にデフォルトの暗くなる効果・及び自分で設定したマスクを解除し、画像本来の明るさにする、といった挙動にするためにはどのように記述すれば良いでしょうか?

    アドバイスいただけますと幸いです。

    0
    いいねをした人: 居ません
    #121538
    GONSY
    参加者
    836

    該当箇所の hover には filter:brightness(80%) が指定され、それで画像を暗くしていると思います。

    .smb-items__banner:active .smb-items__banner__figure,
    .smb-items__banner:focus .smb-items__banner__figure,
    .smb-items__banner:hover .smb-items__banner__figure {
    	filter:brightness(80%)
    }

    ここを 200% などにすれば、マウスを当てた際に明るく変化すると思います。
    また、コードを見ると hover 前の img には opacity: 0.6 が適用されているように思いますので、 hover した際に画像本来の色に戻してあげるほうが良いかもしれません。

    
    .smb-items__banner:active .smb-items__banner__figure > img,
    .smb-items__banner:focus .smb-items__banner__figure > img,
    .smb-items__banner:hover .smb-items__banner__figure > img {
    	opacity: 1 !important;
    }

    自身で設定したマスクに上記が適用されるかは不明ですが、デフォルトのものでいったんお試しください。

    1
    いいねをした人:
    #121621
    shone
    参加者
    47

    >GONSYさん

     

    アドバイスありがとうございます。

    いただいたコードを元に数値を100%にすることで画像本来の明るさに戻す処理ができました!ありがとうございます!

     

    解決しましたのでトピック閉じさせていただきます。

    0
    いいねをした人: 居ません
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「「バナー」のマウスオーバー時のマスクを解除したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。