结合多个悬停效果的 Css

【问题标题】：Css combining multiple Hover Effects结合多个悬停效果的 Css
【发布时间】：2016-09-21 21:52:14
【问题描述】：

我想要实现的是，当 div 悬停在 background-color 淡入时，圆形图像会按比例缩放，并且同时在图像上显示文本覆盖。

我接近实现它，因为我同时使用了 background-color 过渡和图像缩放，但我只能在将鼠标悬停在图像上时触发文本叠加。

任何帮助将不胜感激。

在 cmets 中演示。

【问题讨论】：

codepen.io/caseybr/pen/zqgQdX

标签： css image hover caption

【解决方案1】：

当.hvr-fade div 而非.textfade div 悬停时，您需要更改CSS 以应用悬停动画。

来自

.textfade:hover {
    opacity:1;
}

.textfade:hover h2 {
    -moz-transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

收件人

.hvr-fade:hover .textfade {
    opacity:1;
}

.hvr-fade:hover .textfade h2 {
    -moz-transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

CodePen

【讨论】：

谢谢亨特。救了我一两个小时的痛苦:-)