这次我们使用transform的translateY值来做一个鼠标经过图片上拉，出现文字解释效果：

查看效果

<div class="main"> <div class="view view-tenth"> <figure> <div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/5.jpg" /></div> <div class="mask"> <h2>Wonder Girls</h2> <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和...</p> <a href="#" class="link">查看全文</a> </div> </figure> </div> <div class="view view-tenth"> <figure> <div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/3.jpg" /></div> <div class="mask"> <h2>Wonder Girls</h2> <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和...</p> <a href="#" class="link">查看全文</a> </div> </figure> </div> <div class="view view-tenth"> <figure> <div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/10.jpg" /></div> <div class="mask"> <h2>Wonder Girls</h2> <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和...</p> <a href="#" class="link">查看全文</a> </div> </figure> </div> <div class="view view-tenth"> <figure> <div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/11.jpg" /></div> <div class="mask"> <h2>Wonder Girls</h2> <p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和...</p> <a href="#" class="link">查看全文</a> </div> </figure> </div> </div>

.main *{padding:0; margin:0; font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace; box-sizing: border-box; -webkit-box-sizing: border-box; } .main { position: relative; width: 680px; margin: 0 auto; } .view { width: 300px; margin: 10px; float: left; border: 10px solid #fff; -webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; cursor: default; } .view figure { margin: 0; position: relative; } .view figure img { max-width: 100%; display: block; position: relative; } .view .thumb { overflow: hidden; } .view .mask { position: absolute; top: 0; left: 0; bottom:0; width: 100%; top: auto; bottom: 0; padding: 15px; background: rgb(233, 194, 236); color: #ed4e6e; } .view .mask h2 { margin: 0 0 5px; padding: 0 0 5px; color: #fff; font-size: 18px; line-height:14px; border-bottom:1px solid rgba(255,255,255,.2); } .view .mask p{ font-size: 14px; margin-bottom: 5px; } .view .link { text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; background: #ed4e6e; color: #fff; text-decoration:none; font-size: 14px; } .view-tenth figure { overflow: hidden; } .view-tenth figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .view-tenth figure:hover img{ -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); } .view-tenth .mask { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; } .view-tenth figure:hover .mask { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; }

查看效果