Elementor 实现鼠标悬停在图像上显示文本内容

首先,新建容器,设置容器的背景图片;

然后,在容器内再添加一个容器,在这个容器内添加标题、文字等信息,完成后我们为该容器添加额外的css代码,代码如下:

/*悬停时显示/隐藏内容 CSS*/
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
}

这段css代码是为了实现鼠标悬浮显示的文字效果。

如果需要添加悬浮时的背景色,可以在背景覆盖内添加透明底色,根据要求设置不透明度,过渡时间推荐0.5,与上面的代码的过渡时间一致,避免出现不协调。

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注