CSS 鼠标悬停图片，显示隐藏文本

HTML 结构如下

<div id="Main">
    <div class="con">
        ![](image/n1.jpg)
        <span>
            <h1>世界上最好的年糕</h1>
            <p>多熬粥少熬夜，多吃鸡腿少吃亏</p>
        </span>
    </div>
</div>

CSS 样式如下

#Main {
    width: 600px;
    margin: 50px auto;
    height: 400px;
}
.con {
    width: 500px;
    height: 360px; 
    float: left; 
    margin: 0px 10px;
    position: relative; 
    box-shadow: 3px 3px 10px #666;
    overflow:hidden;
}
.con img {
    width: 500px;
    height: 360px;
}
.con span {
    width: 248px;
    height: 390px; 
    background: #333;
    position: absolute;
    left: -500px;
    top: 0px;
    filter: Alpha(opacity=80);
    -moz-opacity: 0.8; 
    opacity: 0.8; 
    padding: 20px; 
    -webkit-transition: left 0.5s ease;
}
.con span h1 {
    height: 30px;
    color: #fff;
    font-size:18px;
    text-align: center;
    position: relative;
    left: -500px;
    -webkit-transition: left 1s ease;
}
.con span p {
    line-height: 25px; 
    font-size:14px; 
    color: #fff;
    position: relative; 
    left: -500px;
    -webkit-transition: left 1s ease;
}
.con:hover span {
    left:0px;
}
.con:hover span h1 {
    left: 0px;
}
.con:hover span p {
    left: 0px;
}

End of File

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^