ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマUNIQUE:制作実績一覧の不透明度をホバー時と逆にする方法

WordPressテーマ「NULL」

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

ダウンロード

Q.制作実績一覧をホバーした際に暗くさせることはできますか?

テーマUNIQUEの制作実績一覧は、デフォルトでは通常時に薄暗く(不透明度0.8)ホバーした際に、明るく(不透明度1になっています。本記事では、これらを逆(通常時に明るく、ホバー時に薄暗く)する方法をご紹介します。

▼該当箇所イメージ(デフォルト状態)

変更箇所イメージ

▼該当箇所イメージ(ホバー状態)

変更箇所イメージ

A.カスタムCSSで対応できます。

▼参考CSS

.work_list .content:hover img {
    opacity: 0.8;
}

.work_list .image img {
    opacity: 1;
}

▼修正後イメージ(デフォルト状態)

変更箇所イメージ

▼修正後イメージ(ホバー状態)

変更箇所イメージ

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

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

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