1 <style type="text/css">
  2 
  3 *{
  4     margin:0;
  5     padding:0
  6 }
  7 
  8 body{font:400 14px/150% ‘Microsoft YaHei‘,Tahoma, Helvetica, Arial, sans-serif; color:#424242; background:#fff;}
  9 a{color:#369/*#424242*/; text-decoration:none;}
 10 a:hover{color:#f60; text-decoration:underline}
 11 img{border:none}
 12 ul{list-style:none}
 13 
 14 li{
 15     list-style:none;
 16     float:left;
 17     width:200px;
 18     height:120px;
 19     margin:6px 5px;
 20     border:1px solid #d3d3d3;
 21 }
 22 
 23 .sl{
 24     background:#fe7253;
 25     padding:0;
 26     margin:0;
 27     position:relative;
 28     box-sizing:border-box;
 29     cursor:pointer;
 30     -webkit-transition:all .4s ease-in-out;
 31     -moz-transition:all .4s ease-in-out;
 32     -o-transition:all .4s ease-in-out;
 33     -ms-transition:all .4s ease-in-out;
 34     transition:all .4s ease-in-out;
 35     overflow:hidden;
 36 }
 37 
 38 .sl .sl_img{
 39     position:relative;
 40     display:block;
 41     width:100%;
 42     padding:0;
 43     margin:0;
 44     opacity:1;
 45     overflow:hidden;
 46 }
 47 
 48 .sl .sl_ca{
 49     position:absolute;
 50     top:0;
 51     left:0;
 52     width:100%;
 53     height:100%;
 54     margin:0;
 55     padding:0;
 56     
 57     color:#fff;
 58     background:rgba(13, 135, 200,0);
 59     -moz-backface-visibility:hidden;
 60     -webkit-backface-visibility:hidden;
 61     backface-visibility:hidden;
 62     -webkit-transform:translate3d(0,-100%,0);
 63     -moz-transform:translate3d(0,-100%,0);
 64     -o-transform:translate3d(0,-100%,0);
 65     -ms-transform:translate3d(0,-100%,0);
 66     transform:translate3d(0,-100%,0);
 67     -webkit-transition:all .4s ease-in-out;
 68     -moz-transition:all .4s ease-in-out;
 69     -o-transition:all .4s ease-in-out;
 70     -ms-transition:all .4s ease-in-out;
 71     transition:all .4s ease-in-out;
 72     overflow:hidden;
 73 }
 74 
 75 .sl:hover .sl_ca{
 76     background:rgba(13, 135, 200,.8);
 77     -webkit-transform:translate3d(0,0,0);
 78     -moz-transform:translate3d(0,0,0);
 79     -o-transform:translate3d(0,0,0);
 80     -ms-transform:translate3d(0,0,0);
 81     transform:translate3d(0,0,0);
 82 
 83 .sl .sl_ca1{
 84     position:absolute;
 85     top:0;
 86     left:0;
 87     width:100%;
 88     height:100%;
 89     margin:0;
 90     padding:0;
 91     
 92     color:#fff;
 93     background:rgba(13, 135, 200,0);
 94     -moz-backface-visibility:hidden;
 95     -webkit-backface-visibility:hidden;
 96     backface-visibility:hidden;
 97     -webkit-transition:all .4s ease-in-out;
 98     -moz-transition:all .4s ease-in-out;
 99     -o-transition:all .4s ease-in-out;
100     -ms-transition:all .4s ease-in-out;
101     transition:all .4s ease-in-out;
102     overflow:hidden;
103 }
104 
105 .sl:hover .sl_ca1{
106     background:rgba(13, 135, 200,.8);
107 }
108 
109 .sl .sl_ca_h{
110     font-size:1.3em;
111     font-weight:700;
112     text-align:center;
113     position:absolute;
114     top:-50%;
115     left:0%;
116     width:100%;
117     -webkit-transition:all .5s ease-in-out;
118     -moz-transition:all .5s ease-in-out;
119     -o-transition:all .5s ease-in-out;
120     -ms-transition:all .5s ease-in-out;
121     transition:all .5s ease-in-out;
122     overflow:hidden;
123     opacity:0;
124 }
125 
126 .sl:hover .sl_ca_h{
127     color:#fff;
128     top:25%;
129     opacity:1;
130 }
131 
132 .sl .sl_ca_p{
133     font-size:1em;
134     text-align:center;
135     width:80%;
136     position:absolute;
137     top:-50%;
138     left:10%;
139     -webkit-transition:all .6s ease-in-out;
140     -moz-transition:all .6s ease-in-out;
141     -o-transition:all .6s ease-in-out;
142     -ms-transition:all .6s ease-in-out;
143     transition:all .6s ease-in-out;
144     overflow:hidden;
145     opacity:0;
146 }
147 
148 .sl:hover .sl_ca_p{
149     color:#fff;
150     top:45%;
151     opacity:1;
152 }
153 
154 </style>

<li>
    <div class="sl">
    <img class="sl_img" src="http://www.mamicode.com/images/nav/jquery.gif" alt="jQuery">
        <div class="sl_ca">
            <h4 class="sl_ca_h">jQuery</h4>
            <p class="sl_ca_p">优秀的Javascript库</p>
        </div>
    </div>
</li>

<li>
    <div class="sl">
    <img class="sl_img" src="http://www.mamicode.com/images/nav/jquery.gif" alt="jQuery">
        <div class="sl_ca1">
            <h4 class="sl_ca_h">jQuery</h4>
            <p class="sl_ca_p">优秀的Javascript库</p>
        </div>
    </div>
</li>