html如何给图片添加动态的文字说明

前言

之前发过一个html5的学习帖子《html5 学习总结》，帖子内容主要是介绍一些html的基础概念和注意事项如盒子模型、高度塌陷问题。利用html的标签我们可以很轻松的写一个静态网页，但是如果想给页面添加一些简单的动态效果则必须要用到CSS了。
下面来给大家分享一下，如何用CSS给网页中的图片添加一个动态的文字说明，即当鼠标移动图片上时，会有相应的文字说明浮现。想要达到这个效果只要用到的知识点是CSS的 transition(点击查看更详细的transiton说明) 属性。
这里简单介绍一下transition有哪些可以设置的方面：
1、transition-property：设置过渡的属性(all，none，property)，比如：width、height等属性，当选择多个时用‘,’分割，默认为all。
2、transition-duration：设置过渡的时间，比如：1s 、500ms
3、transition-timing-function：设置过渡的运动方式，常用有 linear(匀速)、ease(缓冲运动)
4、transition-delay：设置动画的延迟，比如：1s、500ms
可以采用transition: property duration timing-function delay方式同时设置四个属性。

例如我们有原始图片，如下面所示：

现在需要到达鼠标移入到图片上时出现文字说明的效果，如下所示：

那么对于这样的需求如何实现呢？废话不多说，直接看下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .pic_con{
            width:200px;
            height:300px;
            margin:50px auto 0;
            position:relative;
            overflow:hidden;
        }
        .pic_info{
            position:absolute;
            left:0;
            top:300px;
            width:100px;
            height:200px;
            background-color:rgba(0,0,0,0.3);
            color:#fff;
            padding:10px;
            transition:all 500ms ease;
        }

        .pic_con:hover .pic_info{
            top:180px;
        }

    </style>
</head>
<body>
    <div class="pic_con">
        <img src="images/banner01.jpg" alt="banner">
        <div class="pic_info">
            <h3>新鲜的柠檬</h3>
            <p>价格：5元/kg <br> 好吃不贵，你值得拥有</p>
        </div>
    </div>
</body>
</html>

解释一下代码的实现过程，首先是在页面中创建了一个块div元素("pic_con"，长宽与图片大小一直)，然后这个块元素中添加了需要展示的图片和另一个块元素(“pic_info”，用来显示文字说明，这个块元素需要添加transition属性来达到移入的效果)。最后再给文字说明的块元素添加一个“hover”鼠标移入属性就ok啦，这样鼠标移入时文字说明就会出现了。

最后

emm，今天就分享到这里，快给你的网页添加动态移入的文字说明吧！各位看官们帮忙点个赞呀！！！