让文字悬浮在图片上,是网页设计中常见的效果之一。通过 CSS,我们可以实现这个效果,并让悬浮的文字上方显示出图片。下面是具体的代码实现:.hover-image { position: relativ
让文字悬浮在图片上,是网页设计中常见的效果之一。通过 CSS,我们可以实现这个效果,并让悬浮的文字上方显示出图片。下面是具体的代码实现:
.hover-image { position: relative; display: inline-block; } .hover-image img { display: block; max-width: 100%; } .hover-image p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 10px; background-color: rgba(255, 255, 255, .8); border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s ease-in-out; } .hover-image:hover p { opacity: 1; }
以上代码中,我们首先定义一个父容器,通过相对定位将图片包裹在该容器内。图片本身使用 max-width: 100%
将其宽度限制在容器内。
接着我们定义一个文字容器,将其绝对定位在图片上方的 50% 处,并通过 transform
将其向上向左移动 50%。文字容器的背景色使用半透明白色,以突出显示文字。我们还对文字容器设置了圆角和阴影,使其具有更好的视觉效果。
最后,通过设置文字容器的 opacity
属性,并在鼠标悬浮时将其设置为 1,就可以实现鼠标悬浮时显示图片文字的效果了。
总之,这个效果在网页设计中比较实用,可以让页面更具视觉效果。如果你也喜欢这个效果,赶紧动手试一试吧!
粉丝
0
关注
0
收藏
0