web前端 > web前端
web前端web前端

css3技巧——产品列表之鼠标滑过效果translateY(三)

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

effects1

查看效果

<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;}

查看效果

web前端ruitiancnweb前端z_vae@sina.com

web前端