CSS 在悬停时缩放图像并结合定时淡入淡出

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/

哎呀！它仅将 "top" 层视为可悬停层。

这种行为对我来说绝对有意义，但令人沮丧的是，我看不到优雅的解决方法。

纯CSS有可能吗，还是我要打破JavaScript？

提前谢谢你:-)

P.S。我使代码尽可能简单。在我的实际工作中，我使用 ids 和类并为不同的浏览器做案例，但为了尽可能清楚地传达我的意思，我在这里删掉了一些内容。这是我第一次post来这里，所以我不确定房子的风格。请让我知道我是应该 "complete" 还是 "proof of concept" 来传达信息:-)

P.P.S。如果我处理这两个效果的 CSS 的方式已经不正确或 "dodgy" 那么请告诉我！

Answer 1

您不能同时悬停两个实例，只能悬停一个元素及其父元素（而不是其兄弟元素）。

解决方法是您可以将两个图像包装在 div 中（将其视为父元素）。然后缩放div.

的内容

结果可以在下面的fiddle中看到：

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

CSS 在悬停时缩放图像并结合定时淡入淡出

CSS Scaling Image On Hover Combined With Timered Cross Fade

css

scaling

cross-fade