css3技巧——产品列表之鼠标滑过效果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;
 

猜你喜欢

转载自www.cnblogs.com/furuihua/p/11782618.html