マウスオーバー時の画像切替えをCSSで実装

Blog Admin

マウスオーバーで画像を切替えると言われたらJavaScriptが思い浮かびました。
が、CSSだけでも疑似的に可能なのです。

CSS
マウスオーバーで画像切替え

JavaScriptはなしです。
HTMLとCSSだけで実現する方法です。

いくつか制約はあります。

当ブログをPC表示した際に右ペインに表示されるサイドバーの下端はスクロール追従のウィジェットにしています。
縦の表示ピクセル数が一定以上なら、お問合せとホームへのボタンを表示できます。

CSSだけで画像を切替えるアイデア
- 2枚の画像を重ねて上側を透明にしておく
- 実際に書いたコード
テキストと画像の縦位置で苦労した

CSSだけで画像を切替えるアイデア

JavaScriptなら、onMouseOver などのイベントハンドラーを使ってごにょごにょすればよいと想像できていました。
実際、似たようなことは実験済みでした。

CSSのお勉強がてら、何ができるのか調べてみたところ、CSSだけでの画像切替えも比較的簡単にできそうということになったのです。
当ブログに実装済みです。

サイドバーの下端に設置済みです。
もともとはブログアイコンをマウスオーバーで色調変換していたのですが、飽きたので。

2枚の画像を重ねて上側を透明にしておく

画像を2枚用意します。

重ねて配置します。
通常なら、重なりで後勝ちになり、手前側にくる2枚目が表示されます。

切替えのアイデアとして。
2枚目は透明表示にして、hover時に通常状態にすればよいのですね。
初期は1枚目が見える状態で、hover時には2枚目が見える状態になります。

制限事項があります。
制約かもしれませんが。
透明要素を含む画像を手前側にすると、CSSによる透明指定解除後も、画像の透明要素は生きていますので、後ろ側の画像が透過して見えます。

実装の例でいうと、ホームアイコンは透明要素がふんだんに含まれています。
もしホームアイコンを手前側に配置（hover時に見えるように）すると、マウスオーバー時にはホームアイコンの隙間からブログアイコンが見え隠れする状態になるということです。

実際に書いたコード

HTMLはウィジェットに記載しました。
カスタムHTMLに配置しています。

CSSはテーマエディターでstyle.cssに書き込んでいます。

HTML

お問合せフォームへのボタンも載せます。
ご参考です。

ホームボタンのほうは、見やすいように改行を入れています。

<!-- お問合せ -->
<a href="https://wnkhs.net/contact-form/" title="Contact Form"><pre class="ContactButton">✉ お問合せはこちら</pre></a>
<!-- ホームボタン -->
<a href="https://wnkhs.net/" title="Home" style="vertical-align: top;">
<div class="homeicon">
<img src="https://wnkhs.net/wp-content/uploads/2023/06/home-icon-101.png" alt="" /><!-- 奥側（初期表示） -->
<img src="https://wnkhs.net/wp-content/uploads/2019/05/logo-001-8.png" alt="wnkhs" /><!-- 手前側（hover時表示） -->
</div>
</a>

CSS

実装には含んでいないコメントを追加しました。

/* Home icon */
/* 親要素： クラス名は適宜変更してください */
.homeicon {
    width: 60px;
    height: 60px;
    position: relative;
    display: inline-block;
}
/* 子要素（共通）： imgの設定 */
.homeicon img {
    width: 60px;
    height: 60px;
    position: absolute;
}
/* 子要素 2枚目（上にくる）img： 初期値は透明 */
/* （疑似クラス「last-of-type」で最後の要素を指定） */
.homeicon img:last-of-type {
    opacity: 0;
    transition: opacity .2s;
}
/* 親要素 hover時： 透明化を解除すると2枚目が見えるようになる */
.homeicon:hover img {
    opacity: 1;
}

こっそりと、マウスオーバー時にちょっとだけフェードするようにしています。
ほんの0.2秒なので分からないかもしれませんがｗ

テキストと画像の縦位置で苦労した

表示位置の調整で苦労しました。
まずはdivをインラインとして表示するところです。

display: inline-block; は以前お勉強していたことだったのですが、すっかり失念しておりました。

最も苦労したのが、縦位置の調整です。
未だ変ではあるのですが。。

お問合せのテキスト配置をflexにしておりまして。
背景の表示位置を調整しているわけです。
自分でも何をしたのかまだよく分かっていないところです。

画像をインライン要素で並べるので、テキストのベースラインで揃ってしまいます。
解消のために、vertical-align: top; を設定しています。
若干の無理矢理感は否めないですね。。