Css 组合多个悬停效果

Question

我想要实现的是，当 div 悬停在 background-color 淡入时，圆形图像的大小会缩放，并且文本叠加层会同时出现在图像上。

我即将实现它，因为我有 background-color 过渡和图像缩放同时工作，但我只能在将鼠标悬停在图像上时触发文本覆盖。

如有任何帮助，我们将不胜感激。

Demo在评论里。

Answer 1

您需要更改 CSS 以在悬停 .hvr-fade div 而不是 .textfade div 时应用悬停动画。

来自

.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

Css 组合多个悬停效果

Css combining multiple Hover Effects

css

image

hover

caption