将鼠标悬停在滑块 bootstrap3 Slide Carousel 上放大图像答案

【问题标题】：enlarge images with hover on slider bootstrap3 Slide Carousel将鼠标悬停在滑块 bootstrap3 Slide Carousel 上放大图像
【发布时间】：2017-09-10 19:02:56
【问题描述】：

我查看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。

但是放大不了，怎么办？

【问题讨论】：

它确实放大了小提琴中的图像！有什么问题？
@NarenMurali 我编辑我的帖子。对于较小的宽度，它可以工作。但对于 width:100% 不起作用。
它为width:100% 放大了你能检查一下这个小提琴here
@感谢您的回答。 100% 是自然尺寸。我想放大它，例如 120%
这不能通过缩放滑动的项目来实现

标签： javascript html css twitter-bootstrap carousel

【解决方案1】：

问题是，如果您想增加图像的宽度以假设120%，则增加将完全正常。但是bootstrap.min.css 对img 元素具有以下样式属性。

CSS：

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

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

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

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

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

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

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

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

这是一个有效的演示。

JSFiddle Demo

【讨论】：