CSS缩放悬停图像与Timered Cross淡入淡出相结合

Question

以下是我如何在悬停时缩放图像：

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

以下是我如何交叉淡化两个图像：

#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/

当我试图将两者结合起来时，我会得到以下结果：

https://jsfiddle.net/h453xaav/

哎哟！它只将"顶层"视为可悬停层。

这种行为对我来说绝对有道理，但令人沮丧的是，我看不到优雅的变通方法。

这在纯CSS中是可能的吗？还是我该突破JavaScript了？

提前感谢：-)

附言：我尽可能简化代码。在我的实际工作中，我使用id和类，并为不同的浏览器做案例，但为了尽可能清楚地传达我的意思，我在这里略作介绍。这是我在这里的第一篇文章，所以我不确定房子的风格。请让我知道我是应该让它"完整"还是只是"概念验证"来传达信息：-)

附言：如果我对这两种效果的CSS处理方式已经不正确或"不可靠"，请告诉我！

Answer 1

不能同时悬停两个实例，只能悬停单个元素及其父元素(而不是其同级元素)。

一个解决方案是，您可以将两个图像都包装在div中(将其视为父元素)。然后缩放div.的内容

结果可以在下面的小提琴中看到：

#wrap:hover {
transform: scale(0.75);
-webkit-transform: scale(0.75);
transition: 0.25s ease;
}
#wrap {
position: relative;
transition: 0.25s ease;
background: red;
/* remove this colour, this is just to help show the div shrinking*/
width: 292px;
/* this needs to be defined */
height: 291px;
}
img.top {
position: absolute;
left: 0px;
-webkit-transition: opacity 1s ease-in-out;
-webkit-animation: fade 5s infinite;
transition: 0.25s ease;
}
@-webkit-keyframes fade {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

<div id="wrap">
<img class="bottom" src="http://i.imgur.com/qiupijw.png" />
<img class="top" src="http://i.imgur.com/IAUlHar.png" />
</div>