hoverで背景画像をちらつかせずにフェードで切り替えたい

実現したいこと

要素hover時、背景画像をちらつかせずにフェードで切り替えたいです、

最初は下記のように記述したのですが、ページにアクセスして1回目だけ画像切り替え時にちらついてしまいました。2回目以降は問題ありません。

.staff_Area li a.staff01 {
background-image: url(../img/img01_on.jpg); 
background-repeat: no-repeat;
background-size: cover; 
transition: all 1.4s;

.staff_Area li a.staff01:hover {
background-image: url(../img/img01_over.jpg);
transition: all 1.4s;

なので、次にプレロード仕様にして下記のように記述したところ、
初回アクセス時のちらつきはなくなったのですが、ゆっくり切り替えるということができなくなりました。

.staff_Area li a.staff01{
 background: center / cover no-repeat url(../img/img01_on.jpg),
        center / 0 no-repeat url(../img/img01_over.jpg);
transition: all 1.4s;
}

.staff_Area li a.staff01 {
background-size: 0, cover;
}

今回はcssだけで記述していますが、初回時ちらつきなしで、かつ、ホバーしたら背景画像がゆっくり切り替わる方法どなたかご教示いただけないでしょうか？
よろしくお願いいたします。

Cocode

2023/02/15 02:42

第三者が不具合も含めて再現可能なコードをご提示いただければ、回答を得られやすくなると思います！具体的には、・HTMLも提示する・（今のままでは他人には画像が表示されないので）CDNを用いてダミー画像を挿入するです。よろしくお願いいたします。

masatamu

2023/02/15 03:59

すみません、、情報が足りなかったですね、、今後質問させていただくときはわかりやすく伝わるようにしてみます！アドバイスありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

https://codepen.io/arcxor/pen/VwGwqdg

疑似要素を用いて hover 時の画像を予め opacity: 0 で読み込ませてしまってください。hover 時に opacity: 1 に戻すことで2枚目の画像を表示させます。

html
1<div class="sample">
2  <p>テキストテキストテキストテキスト</p>
3</div>

css
1.sample {
2  z-index: 0;
3  position: relative;
4  width: 320px;
5  height: 240px;
6  background: center center no-repeat;
7  background-image: url("https://dummyimage.com/320x240/ffff00/000000");
8  backgronud-size: cover;
9}
10.sample::after {
11  content: "";
12  z-index: -1;
13  position: absolute;
14  inset: 0;
15  background: url("https://dummyimage.com/320x240/009900/000000");
16  opacity: 0;
17  transition: all 1.4s ease;
18}
19.sample:hover::after {
20  opacity: 1;
21}