HTML代码:
<div class="col-md-3 col-sm-4 box">
<a href="team2.html">
<div class="img">
<img src="img/cyd.jpg" alt="曹允东"/>
</div>
<div class="text">
<div>
<h3>曹允东</h3>
<p>管理合伙人</p>
<p class="more">+查看详情</p>
</div>
</div>
</a>
</div>
下列为css代码:
.team2 .row .box{
padding: 0;
margin-left: 30px;
margin-right: 30px;
position: relative;
}
/*.team2 a{*/
/*position: relative;*/
/*}*/
.team2 .img{
/*position: relative;*/
}
.team2 img{
width: 100%;
}
.team2 .text{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background: url(../img/bg.png) no-repeat ;
background-size:100% ;
opacity: 0;
transition: all 1s;
}
.team2 .text div{
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.team2 .row .box:hover .text{
opacity: 1;
}
.team2 .text h3{
padding: 20px 0;
text-align: center;
font-size: 30px;
}
.team2 .text p{
font-size: 18px;
padding-bottom: 20px;
text-align: center;
}.team2 .text .more{
font-size: 12px;
border: 1px solid #fff;
border-radius: 1px;
line-height: 32px;
padding: 0 15px;
margin: auto;
}
/*没有小于768px,是因为Bootstrap3以移动端优先设计*/
/* 小屏幕(平板,大于等于768px) */
@media (min-width: 768px) {
.team2 .row .box{
margin-left: 0;
margin-right:0;
}
.team2 .text{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100% 100%;
}
}
实现效果如下:
点击:hover前
点击:hover后