お寺や神社、小料理屋など、日本の美意識を表現できるWordPressテーマ「ZEN」
ワードプレステーマ別

TCDテーマGRAVITY:ホバーアニメーションの「フェード」が明るくなるよう変更する方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.ホバーアニメーションで「フェード」を設定しています。ホバー時に画像が暗くなりますが、これを明るくするよう変更可能ですか?

A.下記の方法でご対応ください。

TCDテーマ>基本設定のカスタムCSSに入力して調整します。

@media (any-hover: hover) {
    :where(a, .c-thumbnail):hover .c-thumbnail-image {
        filter: opacity(0.8);
    }
}

 
「filter」プロパティでは、上記の透明度(opacity)変更のほか、ぼかし(blur)やセピア(sepia)といったエフェクトも指定できます。サイト内容にあわせて検討してみてもいいかもしれませんね。
参考サイト(外部サイト):https://developer.mozilla.org/ja/docs/Web/CSS/filter

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事