两个css悬停效果合二为一，两个效果是如何联系在一起的？

Question

如何让两个css代码相互链接？

例如：

一个图标，当它悬停时会翻转，但它的白色背景也会略微上升。

你可以在这个网站的https://www.designhenge.com主页上看到它的服务部分。这两个css是如何相互连接的？它背后的代码是什么？

我已经制作了图标翻转悬停效果。但我不知道白色背景框在翻转图标时是如何略微上升的。

这些是designhenge网站中的元素，在悬停时会出现白色背景框的翻转图标：

​

​

Answer 1

您必须使用div悬停部分的transform:translate属性，他们已使用代码来执行此操作

.info-card:hover {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
}

Answer 2

尝试下面的css：

.info-card:hover {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
}

您也可以像这样检查：

​

​