Css结合多个悬停效果

Question

我想要实现的是，当div悬停在background-color淡入时，圆形图像会缩放，图像会同时显示在图像上。

我接近实现它，因为background-color转换和图像缩放同时工作但我只能将文本叠加层触发，就像我将鼠标悬停在图像上时一样。

非常感谢任何帮助。

评论中的演示。

Answer 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