html 鼠标移入图片上显示文本div

最新推荐文章于 2024-10-02 17:15:49 发布

qq_43460214

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量2.7k

点赞数

文章标签： html css html5 css3

本文链接：https://blog.csdn.net/qq_43460214/article/details/115380450

版权

html 鼠标移入图片上显示文本div
首先html 格式
html 样式：

车位展示

高效·快捷·质量

css样式 .box1>img{ width: 470px; height: 300px; overflow: hidden; } .box1{ width: 500px; height: 300px; overflow: hidden; } .text { width: 400px; height: 200px; background: rgba(0,0,0,.1); border: 1px solid #FFFFFF; padding: 10px; color:#fff; font-size: 20px; position: relative; margin-top:0px; /*text默认处于aa盒子下面,所以不可见*/ transition: .5s} /*transition为过渡动画效果，时间0.5秒*/ .text>p{ padding-top: 30px; text-align: center; } .box1:hover .text { margin-top: -280px; margin-left: 30px; }

(https://img-blog.csdnimg.cn/20210402084522968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDYwMjE0,size_16,color_FFFFFF,t_70#pic_center)