科技前沿-大国风采网
首页 |动态 |IT |科学 |智能 |互联网 |物联网 |大数据 |3D打印 |产品 |创新 |健康 |能源 |通信

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


effect

查看效果

<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;
	padding: 10px;
	background: rgb(233, 194, 236);
	background-color: rgba(233, 194, 236, 0.9);
	color: #ed4e6e;
}

.view .mask h2 {
	margin: 0 0 5px;
	padding: 0 0 5px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	border-bottom:1px solid rgba(255,255,255,.2);
}
.view .mask p{  


上一篇:css3技巧——产品列表之鼠标滑过效果(一)
下一篇:记住,这10条是一个不专业网站最明显的表现

免责声明

1、凡本网专稿均属于本网站所有,转载请注明来源及本网站的作者姓名; 2、本网注明“来源:×××(非本站)”的信息,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若作品内容涉及版权和其它问题,请联系我们,我们将在核实确认后尽快处理。 3、因使用本网站而导致任何意外、疏忽、合约毁坏、诽谤、版权或知识产权侵犯及其所造成的各种损失等,本网站概不负责,亦不承担任何法律责任。 4、一切网民在进入本网站主页及各层页面时视为已经仔细阅读过《网站声明》并完全同意。 编辑联系QQ:3128640874------大国风采网