javascript - 将鼠标悬停在 slider 上放大图像 bootstrap3 Slide Carousel

Question

我查看 this code sample放大图像。

我尝试在 bootstrap3 Slide Carousel 中使用它.

我尝试添加“放大”类 bootstrap3 幻灯片轮播元素。:

<div class="item active">
   <div class="item-item col-md-3 col-sm-4">
     <a href="#">
       <img src="http://placehold.it/500/bbbbbb/fff&text=1" class="img-responsive enlarge">
    </a>
  </div>
</div>

CSS:

.enlarge {
    width: 100%;
    float: left;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.enlarge:hover {
    width: 120%;
       -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  cursor: pointer;
}

你可以看到变化here in jsfiddle .

但是放大不了，怎么办？

Answer 1

问题是，如果您想将图像的宽度增加到假设 120%，增加的效果会很好。但是 bootstrap.min.css 具有以下 img 元素的样式属性。

CSS:

.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}

因此，如果您添加类，您将无法扩展到 100% 以上。

.carousel .img-responsive{
  max-width:none;
}

它将覆盖 Bootstrap 中的 CSS，如果您出于任何原因无法查看更改，您可以添加 !important，这将优先覆盖。

.carousel .img-responsive{
  max-width:none !important;
}

这将应用于轮播下的所有图像。

如果只想指定一个轮播，可以指定轮播的ID，如

#myCarousel .img-responsive{
  max-width:none;
}

这是一个工作演示。

JSFiddle Demo