CSS上划过图片出现文字效果,是一种常用于网页设计的交互效果。下面是如何使用CSS代码实现这个效果: <!--HTML结构--> <div class= co
CSS上划过图片出现文字效果,是一种常用于网页设计的交互效果。下面是如何使用CSS代码实现这个效果:
<!--HTML结构--> <div class="container"> <img src="your-image-url" alt="Your Image" class="img-hover"> <div class="text">Your Text</div> </div> <!--CSS--> .img-hover { position: relative; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .5s ease-out; } .container:hover .text { opacity: 1; }
首先,在HTML中我们需要一个包含图片和文字的容器div,图片使用img标签,文字使用div标签。为了实现效果,我们需要将图片的position属性设置为relative,以便让文字可以基于图片定位。
接下来,在CSS中我们将文字的position属性设置为absolute,以便于对其进行绝对定位。同时我们使用了transform属性将文字水平垂直居中,让它在图片中间显示。opacity属性设置文字的透明度为0,以便实现初始隐藏效果。最后,为了实现文字在鼠标滑过图片时出现,我们使用了:hover伪类,改变容器div的opacity属性,从而使文字出现。
通过以上CSS代码,就可以轻松实现图片上划过出现文字的效果。
粉丝
0
关注
0
收藏
0