答案 0 :(得分:1)
您可以尝试此JSfiddle Demo
代码段
body {
background: #EBEBEB;
}
.box {
text-align: center;
-webkit-box-shadow: 0px 1px 17px -5px rgba(0, 0, 0, 0.63);
-moz-box-shadow: 0px 1px 17px -5px rgba(0, 0, 0, 0.63);
box-shadow: 0px 1px 17px -5px rgba(0, 0, 0, 0.63);
padding: 15px 20px;
margin: 10px auto;
color: #888888;
background: #FFFFFF;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.2);
color: #7B2FC0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.box i {
font-size: 25px;
margin-bottom: 5px;
}
.box h3 {
margin: 0;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="box">
<i class="fa fa-diamond"></i>
<h3>Title</h3>
</div>
</div>
<div class="col-sm-2">
<div class="box">
<i class="fa fa-diamond"></i>
<h3>Title</h3>
</div>
</div>
<div class="col-sm-2">
<div class="box">
<i class="fa fa-diamond"></i>
<h3>Title</h3>
</div>
</div>
<div class="col-sm-2">
<div class="box">
<i class="fa fa-diamond"></i>
<h3>Title</h3>
</div>
</div>
<div class="col-sm-2">
<div class="box">
<i class="fa fa-diamond"></i>
<h3>Title</h3>
</div>
</div>
<div class="col-sm-2">
<div class="box">
<i class="fa fa-diamond"></i>
<h3>Title</h3>
</div>
</div>
</div>
</div>