(HTML, CSS)マウスホバーで画像を切り替えたいが、元の画像と変化後の画像が重ならない

Question

###解決したいこと
マウスホバー時にアイコンの色が反転する機能を、画像の切り替えおよびCSSのみで実装しようと考えています。
CSSのposition relativeとabsoluteを使ってimgファイルを重ねたいのですが、添付画像のようにホバー後のアイコンが右にずれてしまいます。

どこに誤りがあるかがわからず、御知見いただけますと幸いです。

マウスホバー前

マウスホバー後（マウスホバー前との幅の違いは気にしないでください）

なお、Edit Fiddleで見てもやはり横にずれてしまいます。
https://jsfiddle.net/0dnr2h6w/

###各種コード
必要と思う部分のみ表示しております。
不足がありましたらお手数ですがご指摘いただけますと幸いです。

<h1>画像スライド</h1>
<div class="relative">
  <div class="img-bulb"> 
    <img src="{% static 'img/bulb.png' %}" alt="まめちしき" class="icon-category default">
    <img src="{% static 'img/bulb_white.png' %}" alt="まめちしき" class="icon-category activate">
    <p>豆知識</p>
  </div>
</div>

.img-bulb .icon-category{
    transform: rotate(45deg);
}

.img-bulb{
  position: relative;
}

.img-bulb .activate{
    position: absolute;
    opacity: 0.5;
    transition: 0s;
}

.img-bulb:hover .activate{
    opacity: 1;
}

.img-bulb:hover .default{
    opacity: 0;
}

###環境
HTML5
Bootstrap 4.7.0
Python 3.6.3
Django 2.2.16

###追加画像
・position absolute追加後、「豆知識」の一文が画像と重なる

Answer 1

こんにちは（＾＾）初めまして。
minari766さんは、ふたつの豆電球を同じ場所に重ねたいということでしょうか？

もしそうであれば、HTML上にのっている二つの　img/bulb.png と、img/bulb_white.pngを重ねることができれば良いと思いました。

css に

.img-bulb .default{
position: absolute;
}
（hoverの前あたり）
を追加してみていかがでしょうか。

Comments

[minari766]

早速のご回答有り難うございます！
確かに画像を重ねることができました。有り難うございます！

ただし、下の豆知識が画像に食い込むようになってしまいました。
https://jsfiddle.net/0dnr2h6w/
これを回避する方法はありますでしょうか？

[mmmmmm-.]

こんにちは＾＾　ご確認ありがとうございます。
できてよかったです。

.img-bulb .activate のcssの部分で
opacity:0.5;を opacity:0; にしてみてはいかがでしょうか

こんな感じです。
.img-bulb .activate{
position: absolute;
opacity: 0;
transition: 0s;
}

[minari766]

回答が遅くなり申し訳ございません！
また、私の先ほどのコメントの中に説明不足な点があり、こちらもお詫び申し上げます。

「下の豆知識」というのは文字のことで、.default{ position: absolute; }を設定したことで先一文が画像に食い込むようになってしまいました。（※）
position absoluteでレイアウトが変わることはよくあることのようですが、修正方法が見つからず改めてアドバイスいただけますと幸いです。

※質問本文に該当の画像を追加しましたのでご確認いただけますと幸いです。

[mmmmmm-.]

こんばんは＾＾　
申し訳ありません。私が豆知識と豆電球を見間違えてしまいました( ´∀｀ )
わざわざ追加で画像をはってくださりありがとうございます！おかげですぐ理解できました＾＾

２つ修正したら、私のPCではうまくいきました。
１つ目は、HTMLを修正しました。
<p>豆知識</p>
を、</div>（←<div class='bulb-img'>の締め）の下に書きます。
（↓こんな感じです）
<div class="relative">
<div class="img-bulb">
<img src="{% static 'img/bulb.png' %}" alt="まめちしき" class="icon-category default">
<img src="{% static 'img/bulb_white.png' %}" alt="まめちしき" class="icon-category activate">
</div>
　<p>豆知識</p>
</div>

２つ目は、cssに追加のコードをかきました。
img-bulb　のクラスに、height:100px;　※１
を追加します。
（↓こんな感じです）
.img-bulb{
height:100px;
position: relative;
}

なぜこうしたか書かせていただきます。
親要素のクラスimg-bulbにposition:relative;　子要素にposition:absolute;を書かれたと思うのですが、そうすると、親要素の高さがない状態になってしまうそうです。
（とても参考になる記事がありました。https://grow-group.jp/archives/1770/#i）
ですので、ｃｓｓの親要素に高さ（height）をいれると、レイアウト崩れがなくなります。
※１　今回はheight:100px;にしましたが、レイアウトに応じて好きなpxで大丈夫です。

HTMLで、<p>要素を下に移行したのは、div class='img-bulb'の下に配置したいためです。

説明長くなりましたが、解決なさることができたら嬉しいです＾＾

[minari766]

またもや連絡が遅くなり大変申し訳ございません。

非常に丁寧かつ親身にご説明いただき本当に感謝しております。
position:absoluteを使うと高さがなくなること、よくわかりました。うまく微調整してみます！
改めて有り難うございました！！

[mmmmmm-.]

お力になれてたらうれしいです（＾＾）
ありがとうございます( ´∀｀ )