自适应图片实现遮罩层的解决办法

由于业务需求，需要实现在鼠标停留在图片上弹出文字描述性的话语，这样做的目的是为了增加交互性，是页面更加丰富。由于页面是自适应的，当页面大小发生改变时，图片大小也会随之改变，从而遮罩层也应该发生相应的变化，为此，记录一下通过CSS的方式来实现效果。

 父容器设置为相对定位，遮罩层设置为绝对定位，想要从那边实现过渡动画是设置哪个值为100%，比如我想从下往上过度，bottom值为0，width为100%，height为0，当鼠标移入时，可以通过将高度设置为100%，这样就能实现了。下面是具体实现的代码，我引用的是bootstrap的栅格布局，图片为自适应。

           <div class="col-md-4 up">
               <div class="img"><img src="图片资源/相框图片资源/01.jpg" class="img-responsive" alt="" srcset=""></div>
                <div class="text">
                    <p>精美的智能相框</p>
                </div>   
         </div>

    .up{
         overflow:hidden;
         float:left;
         position:relative;
         }
    .text{ 
        width:100%; 
        height:0; 
        overflow:hidden; 
        position:absolute; 
        left:0;
        bottom:0; 
        background:rgba(255,90,88,0.8); 
        font-size:12px;
        color:#fff;
        transition: all 1.2s;
    }
    .text p{
        text-align:left; 
        color:#fff;
         line-height:180%; 
         padding:5px 10px; 
         clear:both
        }
    .up:hover .text{

       height: 100%;
    }