公開日:2022.06.19
更新日:2022.06.20
【CSS】opacityでホバー時に画像、テキストやボタンをフワッと透過させる

マウスホバーしたとき、フワッと白みがかったように半透明にさせる方法です。ごく一般的なホバーアニメーションですね。
通常のコーディングではもちろん、WordPressのブロックに対しても適用させることができます。WordPressでの手順は記事後半で紹介します。
まず、下記に実際のサンプルを示してみます。
サンプル
テキストを半透明に

実装方法
.hover-opacity {
transition-property: opacity;
transition-duration: 0.5s;
}
.hover-opacity:hover {
opacity: 0.7;
}
単に実装するだけであれば、適用させたい要素にこのCSSを当ててあげればオッケーです。
あとは好みで透明度や速度を調整したいかた用に、それぞれのプロパティと値が何を言っているのかを以下に解説します。
CSSの解説
透明度を指定する
まず、透明度(どれくらい透過させるか?)を指定しているのがこちらです。
.hover-opacity:hover {
opacity: 0.7;
}
要素をホバーしたとき、不透明度(はっきり映る度合い)を0.7まで下げる、という意味です。
1が普通にはっきり表示されている状態で、0.9、0.8‥となるにつれ透けていきます。0にするともちろん完全に透明に(見えなく)なります。
透明になるまでの速度を指定する
透明になるまでの速度、「フワッ!」なのか「フワ〜〜」なのかの度合いを指定するのがこちらです。
.hover-opacity {
transition-property: opacity;
transition-duration: 0.5s;
}
2行目のtransition-property: opacity;は、「アニメーション変化(transition)させるプロパティはopacityですよ」と指定している箇所なので、今回こちらを編集することはありません。
速度を指定しているのが、3行目のtransition-duration: 0.5s;です。
この値の0.5sというのは0.5秒という意味なので、こちらを0.3だったり、1などに書き換えることで変化速度を好みに変えることができます。
WordPressブロックエディタにも実装可
WordPressブロックエディタにおいて、各ブロックに対しても半透明アニメーションを実装することができます。
今回のCSSをテーマに追加する形ですね。慣れているかたならテーマを編集しても良いですが、そうでない限りは「追加CSS」に記述するのが無難かと思います。
「追加CSS」にCSSを書き込む
管理画面の左側メニューから「外観」→「カスタマイズ」をクリック

「追加CSS」をクリック

こちらの入力欄に、今回紹介したコードをペーストします

.hover-opacity {
transition-property: opacity;
transition-duration: 0.5s;
}
.hover-opacity:hover {
opacity: 0.7;
}
最後に「公開」。そうしたらこの画面は閉じて大丈夫です。

以上で「hover-opacityと名前(クラス名)を付けた要素はホバー時に半透明にしますよ」という命令文がテーマに追記されましたので、実際の投稿画面で使ってみます。
※この「追加CSS」とは、現在有効中のテーマに対してだけ適用されますので、テーマを変更すると無効になります。
適用させたいブロックに名前(クラス名)を付ける
投稿画面において、目的の要素を選択した状態で「ブロック」→「高度な設定」をクリック

「追加CSSクラス」という入力欄が現れますので、こちらに「hover-opacity」と入力

こうですね。以上で完了です。
投稿画面上では半透明にならないので、プレビューで確認してみてください。

サイト保守契約の便利ツール
この記事を読んでくださったWeb制作会社・フリーランスのあなたへ‥
Webサイトの保守業務委託においては、毎月定額の決済をお願いするのが一般的だと思います。
決済方法として便利なのがクレジットカード自動引き落とし。一度顧客に手続きいただければ毎月自動で決済してくれるので、制作会社側も顧客側も何の手間もかかりません。
当事務所で導入しているのがSquare(スクエア)。
導入は無料で、コストはクレジット決済手数料(3%台)のみ。
毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いものです。
制作会社、顧客ともに手続き操作もカンタンですし、こちらの記事で解説もしていますので、ご参考ください。
保守費決済のほか、ちょっとした小額の決済も決済リンクを送ってすぐ完了。
非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。
