@charset "utf-8"; /* CSS Document */ #container{ position:relative; float:left; width:calc(100% + 30px); margin:20px -15px 0px -15px; padding: 20px 0px; } #container .waterfall-loading{ position: absolute;z-index: 10;left:15px;top:35px;right:15px;bottom:35px;border-radius: 4px; display: flex;flex-flow:column wrap;justify-content: center;align-content: center;align-items: center; background-color: rgba(255,255,255,1);color:#000;overflow: hidden;} .grid{ float:left; width:calc(100% / 3 - 30px); min-height:100px; padding: 0px; background:#ffffff; margin:15px; font-size:12px; position: relative; box-shadow: 0 0 6px 2px rgba(255,255,255,0.4); border-radius: 4px; overflow: hidden; /* box-shadow: 0 1px 3px rgba(34,25,25,0.4); -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4); -webkit-transition: top 1s ease, left 1s ease; -moz-transition: top 1s ease, left 1s ease; -o-transition: top 1s ease, left 1s ease; -ms-transition: top 1s ease, left 1s ease; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; */ } .grid .image{float: left;width: 100%;position:relative;overflow: hidden;} .grid .image img{float: left;width: 100%;transition:all .5s;overflow: hidden;} .grid .mark{z-index:1;position: absolute;left:0;right:0;top:0;bottom:0; transition: all .5s; background-color:rgba(0,0,0,0);overflow: hidden;} .grid .info{float: left;width: 100%;padding:20px;text-align:justify; background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1)); color:#ffffff;position:absolute;left:0;bottom:0;z-index:2;overflow: hidden;} .grid .info .date{float: left;width: 100%;font-size:14px;overflow: hidden;} .grid .info .title{float: left;width: 100%;padding-bottom:0px;font-weight:400;font-size:18px;overflow: hidden;} .grid .info .demo{float: left;width: 100%;font-size:14px;margin-bottom:0;overflow: hidden;} .grid:hover .info .title{} .grid:hover .info .demo{} .grid:hover .image img{transform: scale(1.2);} .grid:hover .mark{background-color:rgba(0,0,0,.5);}