css - タイマー付きクロスフェードと組み合わせたホバー時の CSS スケーリング画像

Question

ホバー時に画像をスケーリングする方法は次のとおりです。

img {
    transition: 0.25s ease;
}
img:hover {
    transform: scale(0.75);
    transition: 0.25s ease;
}

2つの画像をクロスフェードする方法は次のとおりです。

#cf {
  position:relative;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top {
    -webkit-transition: opacity 1s ease-in-out;
    -webkit-animation: fade 5s infinite;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

https://jsfiddle.net/1n279ct8/

そして、2つを組み合わせようとすると、次のようになります。

https://jsfiddle.net/h453xaav/

痛い！「トップ」レイヤーのみをホバー可能として扱っています。

この動作は私にはまったく理にかなっていますが、イライラすることに、エレガントな回避策がわかりません。

純粋な CSS でそれは可能ですか、それとも JavaScript を分解する時が来ましたか?

前もって感謝します ：-）

PS コードはできるだけシンプルにしています。私の実際の作業では、id とクラスを使用し、さまざまなブラウザーのケースを実行しますが、ここでは、私の意図をできるだけ明確に伝えるために、その一部を省略しています。これは私の最初の投稿なので、家のスタイルがよくわかりません。メッセージを伝えるために、それを「完全」にするか、単に「概念実証」にするかを教えてください:-)

PPS これら 2 つの効果の CSS の使用方法が既に間違っているか、「危険」である場合は、お知らせください。