鼠标滑过图片，图片上出现一个遮罩层并显示图片的提示文字

html的内容：

<div class="ih-item">   

             <a href="#">
                <div class="img"><img src="img/6.jpg" alt="img"></div>  //图片
                <div class="info">       //提示文字
                        <h3>这里是新闻标题简要介绍一下吗</h3>
                </div>
             </a>

  </div>

样式设置如下：

//首先确定遮罩层的大小

.ih-item{           
    position: relative;
    width: 220px;
    height: 220px;
    }

//首先确定遮罩层中图片的大小

.ih-item .img img{
    position: relative;
    width: 220px;
    height: 220px;
    max-width: 100%;
    } 

提示文字

.ih-item .info {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;/* 隐藏旋转元素的背面*/
    backface-visibility: hidden;
    background: rgba(0, 0, 0, 0.6);   /*后面这个0.6是指的背景的透明度*/
    opacity: 0;
    -webkit-transition: all 0.35s ease-in-out;   /*规定提示信息怎样出现ease-in-out以慢速度开始和结束*/
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

最最重要的来了，鼠标化划过的时候刚开始info是opacity: 0;现在透明底变成1就显示出来了

.ih-item a:hover .info {
    opacity: 1;    /*有opacity有0变成1*/            
}