鼠标悬停显示透明文字内容

最近得出一个css规律，凡是变化的css特效，总是在不同状态之间转换，只要规定好不同状态下的样式并使用 transition

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8" />
 5 <title>鼠标悬停显示透明文字内容</title>
 6 <style>
 7 .xuanting{
 8     width:220px;
 9     margin:40px auto;
10     height:240px;/*宽高根据图片尺寸调整*/
11     background:url(http://images.cnblogs.com/cnblogs_com/lhat/985631/o_lf.jpg) no-repeat;
12     background-size: 100%;
13     
14     cursor:pointer;
15     position:relative;
16     overflow:hidden; /* 在no hover时隐藏过长内容 */
17 }
18 .xuanting span.neirong{
19     width:100%;
20     height:100%;
21 
22     position:absolute;/* 绝对定位*/
23     top:100%;
24     left:0; 
25     color:red;
26     background:#e5e5e5;
27     opacity:0.4;
28     text-align:center;
29     
30     /* 动画效果 */
31     transition:top 1s ease-out;
32 }
33 .xuanting:hover span.neirong{
34     top:0;
35 }
36 
37 </style>
38 </head>
39 <body>
40     <div class="xuanting">
41         <span class="neirong">我要成为海贼王的男人</span>
42     </div>
43 </body>
44 </html>

我要成为海贼王的男人