实现效果：
实现思路：
1、建立一个父盒子div包含三张图片的div，每个图片的div当中再存放一个p标签，用来实现悬浮。
2、将三个包含图片的div浮动到父盒子当中，设置相对定位。p标签设置绝对定位，置于图片最底部。这样做可以实现“子绝父相”，让p标签以图片div为基准点，进行精准的定位。
3、设置p标签的背景颜色和文字颜色将它们的透明属性opacity设置为0，元素即可实现表面上的消失。
4、然后再设置图片div的hover和p标签的transtion属性，即可实现悬浮的过渡效果。
注意事项：
1、代码中标签的共性属性可以写在一起，这样比较美观。
2、父盒子要设置，overflow：hidden。可以让盒子形成BFC规范。子元素不会从父盒子脱落。
3、p标签文字离图片边框过近不美观，有些同学会去设置它的maigin或者padding属性，这是错误的，你不设置p标签颜色看不出来，当你设置了颜色，你会发现你设置的lfet属性会让p标签超出图片div。设置text-indent，文字在p标签里面进行缩进即可。
4、transition:opacity 0.7s linear 0s被我写成了综合属性，将它们拆分成小属性分为是下面的含义。
transition-property:哪些属性需要过渡 ;
transition-duration:动画时间 ;
transition-timing-function: 动画变化曲线;
transition-delay: 延迟时间;
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字悬浮图片过渡</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1 {
width: 2010px;
position: relative;
/* 盒子形成BFC 这样图片元素不会从div中脱落*/
overflow: hidden;
margin: 0 auto;
}
/* 共同属性写在一起 */
/* 子绝父相 父盒子设置相对定位 子盒子设置绝对定位 让子盒子以父盒子为基准点进行定位 */
.box1,
.box2,
.box3 {
width: 650px;
height: 360px;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
/* 浮动的每个元素都要设置 */
.box1 {
background-image: url(/过渡images/0.jpg);
float: left;
}
.box2 {
background-image: url(/过渡images/1.jpg);
float: left;
}
.box3 {
background-image: url(/过渡images/2.jpg);
float: left;
}
/* 文字标签 */
p{
width: 650px;
height: 30px;
background-color:rgba(0, 0,0,.5);
/* 透明度设置为0 */
opacity: 0;
color: white;
font-weight: bold;
/* 文字缩进，这样不会影响到盒子的宽度 */
text-indent: 10px;
font-size: 20px;
/* 设置绝对定位,定位到图片的左下角 */
position: absolute;
left: 0px;
bottom: 0px;
/* 设置过渡动画 */
transition:opacity 0.7s linear 0s;
}
/* 设置伪类 */
.box1:hover p{
opacity: 1;
}
.box2:hover p{
opacity: 1;
}
.box3:hover p{
opacity: 1;
}
</style>
</head>
<body>
<div class="div1">
<div class="box1">
<p>北京天安门</p>
</div>
<div class="box2">
<p>北京鸟巢</p>
</div>
<div class="box3">
<p>雄伟壮阔的卢沟桥</p>
</div>
</div>
</body>
</html>欢迎大家在评论区交流，友善沟通。
声明：以上所有内容为本人原创，未经许可严禁转载，转载请私信，并注明出处。