图片上滑遮罩

<style type="text/css">

@media only screen and (min-width: 768px) {

  /* Add your Desktop Styles here */

.avia-image-container-inner { overflow:hidden;}

.avia-image-container-inner .av-image-caption-overlay{top:100%;transition: all 0.4s ease-in-out;}

.avia-image-container-inner:hover .av-image-caption-overlay{top:0;transition: all 0.4s ease-in-out;}

.avia-image-container-inner .avia_image{ position:relative;    -webkit-transition: all 0.3s ease-in-out;

    transition: all 0.4s ease-in-out;}

.avia-image-container-inner:hover .avia_image{

transition: all 0.4s ease-in-out;

-webkit-transform: translateY(-100%);

-moz-transform: translateY(-100%);

-ms-transform: translateY(-100%);

transform: translateY(-100%);}

.av-overlay-hover-deactivate .av-caption-image-overlay-bg{opacity: 1 !important; }

.av-overlay-hover-deactivate:hover .av-caption-image-overlay-bg{opacity: 1 !important; }

.avia-image-container-inner .av-caption-image-overlay-bg{opacity: 1 !important; }

.avia-image-container-inner:hover .av-caption-image-overlay-bg{opacity: 1 !important; }

}

</style>

图片上滑遮罩

原文：http://luckyyang.blog.51cto.com/4524113/1795910