css图片上浮文字 |css3实现旋转360

css红色竖线，纯css 图片滑动，css让a充满容器，css能有多少大盒子，手机登录框布局css代码，在css样式中设置斜体，css3实现旋转360 css图片上浮文字 |css3实现旋转360

HTML代码：

<div class="photo">
<img src="image.jpg" alt="图片">
<span class="description">这是一段图片的描述文字</span>
</div>

首先，大家需要将图片和文字包裹在一个div当中，并且给这个div一个class，比如说叫做“photo”。然后在这个div当中大家分别放上图片和文字，并分别给它们加上一个class，比如说图片是“photo-img”，文字是“description”。

CSS代码：

.photo {
position: relative;
display: inline-block;
}
.photo .description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
padding: 10px;
font-size: 14px;
text-align: center;
}
.photo:hover .description {
display: block;
}

在CSS代码中，大家首先将图片所在的div设置为相对定位，并且这个div的display属性设置为inline-block，这是因为大家希望这个div只占用它实际的宽度，不会占满整个父容器的宽度，从而使后面的元素也能够与它并排放置。

接下来，大家在文字所在的span标签上设置了position:absolute，并且将它的bottom、left、right属性均设置为0，这样可以让文字在图片的底部展示，并且与图片的左右两侧贴合。大家还设置了一个半透明的黑色背景和白色文字，使得文字更加显眼。

最后，大家在.photo:hover .description时，当鼠标经过图片所在的div时，让文字的display属性变为block，这样文字才会显示出来。

通过这样的设置，大家就可以轻松地实现在图片上浮动的文字效果啦！