我在悬停时缩放图像，但是当图像悬停边框自动消失时。如果我在li某个媒体屏幕中定义li宽度，甚至在屏幕pixel中出现一个像素差异，那么我使用li宽度的百分比是因为响应速度如此这就是为什么我使用宽度百分比。
<div class="carousel slide main-slider">
<!-- Wrapper for slides -->
<ul class="carousel-inner list-unstyled no-mb">
<li class="item active hero"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
<li class="item active"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
<li class="item active"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
<li class="item active"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
<li class="item active"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
</ul>
<ul class="carousel-inner list-unstyled no-mb hidden">
<li class="item active hero"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
<li class="item active"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
<li class="item active"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
<li class="item active"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
<li class="item active"> <a href="javascript:;">
<div class="thumb-container">
<div class="thumb-img img-fit"> <img src="inc-media/thumb.jpg"> </div>
</div>
<div class="carousel-caption"> <span class="label label-slider">First Look</span>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class="list-unstyled ps-row row no-mb timing">
<li class="ps-col col-xs-6"><i class="fa fa-clock-o"></i> 29 DEC 2016</li>
<li class="ps-col col-xs-6"><i class="fa fa-comment-o"></i> 12</li>
</ul>
</div>
</a> </li>
</ul>
<!-- Controls -->
<a class="left carousel-control"> <i class="glyphicon glyphicon-chevron-left"></i> <span class="sr-only">Previous</span> </a> <a class="right carousel-control"> <i class="glyphicon glyphicon-chevron-right"></i> <span class="sr-only">Next</span> </a> </div>
CSS
.main-slider {
overflow: hidden;
}
.main-slider ul li.item {
padding: 0px;
width: 29%;
height: 162.5px;
float: left;
overflow: hidden;
}
.main-slider ul li.item:hover{
padding-right:1px;}
.main-slider ul li.item:hover img {
transition: transform 1s cubic-bezier(0.260, 0.695, 0.375, 0.965);
-webkit-transition: -webkit-transform 1s cubic-bezier(0.0260, 0.695, 0.375, 0.965);
-webkit-transform: scale(1.02);
transform: scale(1.02);
}
.main-slider .thumb-container {
padding-bottom: 163px;
}
.main-slider li.item.hero .thumb-container {
padding-bottom: 325px;
}
.main-slider ul li.item {
border-right: 1px solid rgba(0,0,0,0.15);
border-bottom: 1px solid rgba(0,0,0,0.15);
}
.main-slider ul li.item:nth-last-child(3), .main-slider ul li.item:last-child {
border-right: 0px;
}
.main-slider ul li.item:nth-last-child(2), .main-slider ul li.item:last-child {
border-bottom: 0px;
}
.main-slider .carousel-caption {
left: 0;
right: 0;
padding: 2px 10px 0px 10px;
bottom: 0;
color: #fff;
background: rgba(0,0,0,0.72);
text-align: start;
}
.main-slider ul li.item h3 {
color: #fff;
line-height: normal;
text-shadow: 1px 1px 2px rgba(0,0,0,.8);
font-size: 20px;
padding: 0 0 5px 0;
margin: 0px;
border-bottom: 1px solid #fff;
font-weight: normal;
}
.main-slider li.item.hero {
width: 42%;
height: 325px;
border-bottom: 0px;
}
.main-slider li.item.hero h3 {
font-size: 28px;
}
.main-slider .timing li {
font-size: 12px;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
text-transform: uppercase;
}
.main-slider .timing li:last-child {
text-align: right;
}
.label-slider {
background: rgba(255,255,255,0.79);
color: #000000;
text-shadow: none;
position: absolute;
top: -23px;
left: 0px;
border-radius: 0px;
font-size: 13px;
padding: 5px 10px;
font-weight: bold;
line-height: 1;
}
.main-slider li.item.hero .label-slider {
font-size: 16px;
top: -27px;
line-height: 1.1;
}
/* slider controller setting
------------------------------*/
.main-slider .carousel-control {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
width: 5%;
cursor: pointer;
}
.main-slider:hover .carousel-control {
visibility: visible;
opacity: .5;
transition: visibility 0s, opacity 0.5s linear;
}
.main-slider:hover .carousel-control:hover {
opacity: 1;
transition: visibility 0s, opacity 0.5s linear;
}