Html 更改链接悬停纯CSS上的背景图像

我试图在我的网站上获得这种效果。例如：

（向下滚动至“我们专门从事”）

我对HTML和CSS非常陌生，我也在WordPress上工作，这让它变得有点难。 在StackOverflow开始编写此问题的代码：

但是我想在交换的图像之间添加一个转换，我需要在哪里更改字体属性

div.link>a{
显示：内联块！重要；
职位：相对！重要；
z指数：100；
}
.bg1:悬停+背景{
背景：url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg2:悬停+背景{
背景：url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.背景{
背景：透明；
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
}

---

您可以添加一些不透明度转换，如下所示：

div.link>a{
显示：内联块；
位置：相对位置；
z指数：100；
}
.bg1+背景{
背景：url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:悬停+背景{
不透明度：1；
}
.bg2+背景{
背景：url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:悬停+背景{
不透明度：1；
}
.背景{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
过渡：1s全部；
不透明度：0；
}

嘿，非常感谢！这真的很有帮助！但是你能再给我解释一下吗？我想要一些其他的悬停效果，可能只是在文本上，比如我发布的示例页面。像成长。。。此外，图片不在页面的中间，试图改变Z指数，但它打破了效果。还有最后一件事（SRY麻烦你：S）如果我在WordPress页面中粘贴这个页面，它会改变整个页面背景或者仅仅是部分背景？@ Bouikri 1）如果你想对文本产生一些影响，考虑转换（比如：<代码>转换：TrimSu胶（10px）< /C> >）（2）来调整图像，考虑背景大小和背景位置，以便能够将图像放在你想要的位置（3）都取决于代码，正如你在第一个代码中看到的那样，div被设置位置：绝对的，所以如果你需要它们只覆盖一个特定的部分，添加位置：相对于那个部分（EX:）谢谢！你所有的代码工作得很好！我能再问一件事吗？如果我想更改悬停时的文本（或者实际添加图标或类似示例的内容如何才能做到？我知道我可以扩展它：D@BenZikri您可以从这里选择一个图标：例如，将其与文本一起添加，如果您想更改文本，请查看

transform

，您将能够在鼠标悬停时设置文本动画是与transform我想结合两件事，第一件事e链接悬停时的背景变化。第二，链接本身应该增长并改变为其他内容。例如：“建筑可视化”到“建筑可视化>>”我正在尝试合并我在论坛上找到的另一把小提琴，但没有成功：