鼠标滑过图片，在图片上出现提示的文字

<div class="bs-example">
    <div class="row">
        <div class="col-sm-6">
             <a href="#">
                <div class="img"><img src="img/6.jpg" alt="img"></div>
                <div class="info">
                        <h3>这里是新闻标题简要介绍一下吗素冠荷鼎更待何时大好时光大好时光的还是</h3>
                        <p class="date">2013-4-12</p>
                </div>
             </a>
            
        </div>

    </div>

    .bs-example{position:relative;width:200px;height:200px;overflow: hidden;}    //超过的部分隐藏
            .col-sm-6 img{width:200px;height:200px;max-width:100%;position: relative;}
            .info{position:absolute;top:0%;left:0px;width:200px;height:200px;    background: rgba(0, 0, 0, 0.6); text-align: center;color:#fff; opacity:0;
    -webkit-transition: all 0.35s ease-in-out;  //让info里面的所有动画都是慢进慢出的效果，这样下面鼠标滑过透明度变成1时才没那么突兀
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    }
            .info h3{padding:5px;font-size:16px;}
            .col-sm-6:hover .info{opacity:1;}