首先,新建容器,设置容器的背景图片;
然后,在容器内再添加一个容器,在这个容器内添加标题、文字等信息,完成后我们为该容器添加额外的css代码,代码如下:
/*悬停时显示/隐藏内容 CSS*/
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
}
这段css代码是为了实现鼠标悬浮显示的文字效果。
如果需要添加悬浮时的背景色,可以在背景覆盖内添加透明底色,根据要求设置不透明度,过渡时间推荐0.5,与上面的代码的过渡时间一致,避免出现不协调。